今天在学习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. Ajax初窥

    Ajax四个步骤 1. 创建Ajax对象2. 连接到服务器3. 发送请求4. 接收返回值 0x01 创建AJAX对象 方法1(非IE6.0) Var oAjax = new XMLHttpReques ...

  2. MongoDB学习之（一）安装

    第一步:下载MongoDB的安装版进行安装 https://pan.baidu.com/s/1X3hIqORJ61TCG1UJ_yr6ag 由于第二次安装出现一些问题,所有还是记录一下,免得以后踩坑. ...

  3. java中的访问控制符

    首先来一张图: 对于一个类而言访问控制符只有一个public和默认无修饰符.其他的几个访问修饰符对于变量和方法都可以使用. 下面介绍具体的使用. 1. 公有访问控制符(public) Java的类是通 ...

  4. PHP 之超级全局变量

    参考菜鸟教程,并经过自己亲手实验,记录PHP的几个超级全局变量 所谓超级全局变量 ,你可以理解为在一个脚本里面的全部代码里面都可以使用的变量. $GLOBALS $GLOBALS 是 php 的一个超 ...

  5. BM和KMP字符串匹配算法学习

    BM和KMP字符串匹配算法学习 分类: 研究与学习 字符串匹配BM(Boyer-Moore)算法学习心得 http://www.cnblogs.com/a180285/archive/2011/12/ ...

  6. Android ListView 长按列表弹出菜单

    Android ListView 长按列表弹出菜单 设置长按菜单 listView.setOnCreateContextMenuListener(new View.OnCreateContextMen ...

  7. Java 并发编程学习笔记 理解CLH队列锁算法

    CLH算法实现 CLH队列中的结点QNode中含有一个locked字段,该字段若为true表示该线程需要获取锁,且不释放锁,为false表示线程释放了锁.结点之间是通过隐形的链表相连,之所以叫隐形的链 ...

  8. SpringAOP 通知(advice)

      @Aspect @Order(1) public class AopOne { /** * 目标方法执行之前 * @param joinPoint */ @Before("executi ...

  9. 服务器不装Excel读取Excel并转换DataTable

    原来是用OleDb.4.0组件读取Excel,但是放到服务器后 傻了,服务器没装Excel ,而且领导说不可以装 没办法,只好自己重新找下代码 在CodeProject找到一个开源的dll,一阵欢喜啊 ...

  10. arduino~snprintf

    #include <stdio.h> printf, fprintf, sprintf, snprintf, vprintf, vfprintf, vsprintf, vsnprintf ...