今天在学习React的es6语法的时候，发现了个有趣的现象，就是this的指向问题。es6的this不同于es5，它在创立函数伊始便已经存在了，而不是像es5一样，睡调用的函数，this指向谁。但是这也产生了一个令人头疼的问题，当改变状态this.setState的时候，明显会报错，这是this指针的原因，那如何解决呢？只需要通过在调用函数的时候绑定this或者穿个e获取即可，即：

  <button  onClick={this.openSwitch.bind(this)}> please click me</button>

或者

  <button  onClick={onClick={e => this.openSwitch(e)}}> please click me</button>

　　那我们如果想传递参数呢？只需要在bind里面的参数继续添加即可，再在定义的事件里面进行接收即可，完全代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件</title>

    <script src="./bower_components/react/react.production.min.js"></script>

    <script src="bower_components/react/react-dom.production.min.js"></script>

    <script src="bower_components/babel/browser.js"></script>

</head>

<body>

<div id="test2"></div>

</body>

<script type="text/babel">

    class Btn2 extends React.Component {

        openSwitch(status){

            console.log(status);

            console.log(this);

        }

        render() {

            return (

                    <button  onClick={this.openSwitch.bind(this,123)}> please click me</button>

            )

        }

    }

    ReactDOM.render(

            <Btn2/>,

        document.getElementById("test2")

    )

</script>

</html>

　　结果如下：

如果想得到event的话，只需要在形参的后面加上event即可

React如何进行事件传参的更多相关文章

  1. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  2. react事件绑定，事件传参，input单向数据绑定

    import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...

  3. 微信小程序：bindtap等事件传参

    事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, data ...

  4. 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等

    一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...

  5. wpf 用户自定义事件传参

    //自定义传参 ,对外联系的参数 public class ImageZoomChangedEventArgs : RoutedEventArgs { /// <summary> /// ...

  6. 微信小程序 - bindtap等事件传参

    什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, ...

  7. JS中onclick事件传参

    美术馆案例中,需要将“增加一个img标签,放入大图片”这样一个函数封装,但是在调用的时候需要传参. <script type="text/javascript"> on ...

  8. React跳转路由传参3种方法和区别

    1.params传参 路由表配置:参数地址栏显示 路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:i ...

  9. React 事件 传参

    绑定事件用 bind方法,第一个参数是 this,第二个参数是需要传入的值如下: <a onClick={this.updateLabel.bind(this,'参数1','参数2')} > ...

随机推荐

  1. python相关参考地址收藏

    python http://www.python.org/ setuptools https://pypi.python.org/pypi/setuptools Easy Install https: ...

  2. linux的一些软件基本安装

    买了个腾讯云的服务器,开始玩起来了,先装环境吧. JAVA安装 安装个java yum -y install java-1.7.0-openjdk* 查看java版本 java -version 可以 ...

  3. Java项目中如何扩展第三方jar包中的类？

    有些时候你对第三方得到jar包中的类并不是很满意,想根据实际情况做一些扩展.如果说第三方的jar包已经提供了一些可扩展的类,比如提供了Interceptor,Filter或者其他的类,那么使用原生的比 ...

  4. java日期工具类DateUtil-续二

    该版本是一次较大的升级,农历相比公历复杂太多(真佩服古人的智慧),虽然有规律,但涉及到的取舍.近似的感念太多,况且本身的概念就已经很多了,我在网上也是查阅了很多的资料,虽然找到一些计算的方法,但都有些 ...

  5. Linux 进程间通信（posix消息队列 简单）实例

    Linux 进程间通信(posix消息队列 简单)实例 详情见: http://www.linuxidc.com/Linux/2011-10/44828.htm 编译: gcc -o consumer ...

  6. 在linux上安装redmine

    Redmine 是一个开源的.基于Web的项目管理和缺陷跟踪工具.它用日历和甘特图辅助项目及进度可视化显示.同时它又支持多项目管理.Redmine是一个自由开放 源码软件解决方案,它提供集成的项目管理 ...

  7. 12款优秀jQuery Ajax分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...

  8. 15天玩转redis（mark，redis学习系列）

    转自:http://www.cnblogs.com/huangxincheng/p/4966258.html 双十一终于还是过去了,我负责的mongodb由于做了副本集,最终还是挺过去了,同事负责的r ...

  9. UML---UML中的几种关系(依赖，关联，泛化，实现)

    关于设计模式的总结没有落实到代码上,而且设计模式自己确实动手实现的非常少.所以在这一周里,除了看网站开发的视频,着手开始对设计模式进行实现以下.设计模式非常经典,每次看都有不同的收获,写一下自己的收获 ...

  10. SQLServer 跨库查询实现方法

    不使用链接的服务器名,而提供特殊的连接信息,并将其作为四部分对象名的一部分 本文给出一条 SQL 语句用于展示在同一名服务器上,不同的数据库间查询,注意当前连接用户要对两个库都有权限SQL Serve ...