今天在学习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. js获取checkbox值的方法

    js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...

  2. 枚举类转成json

    import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; /** * portlet类别枚举类 */ ...

  3. javascript总述

    一.JavaScript核心 一个完整的JavaScript应该由下列三个不同的部分组成. 1.核心(ECMAScript) 2.文档对象模型(DOM,Document Object Model) 3 ...

  4. 奇妙的go语言（面向对象）

    [ 声明:版权全部.欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 有过C++语言学习经历的朋友都知道.面向对象主要包含了三个基本特征:封装.继承和多态.封装,就 ...

  5. iOS开发小技巧--定义宏和pch文件的使用

    一.创建pch文件,默认跟项目同名 二.告诉系统,编译的时候要编译pch文件的步骤 三.把经常用到的宏  或者  分类 包含到这里

  6. LINQ操作符三：限制操作符

    where是限制操作符,它将过滤标准应用在序列上,按照提供的逻辑对序列中的数据进行过滤. where操作符不启动查询的执行.当开始对序列进行遍历时才开始执行,此时过滤条件将被应用到查询中. 示例: / ...

  7. d3js把circle和rect连接在一起

    怎么办呢...哎...突然就必须全选中了.... 但是...一不小心想到 在g里面都添加circle和rect 但是根据tpye可以让circle的r为0或者rect的width和height为0,这 ...

  8. 百万级PHP网站架构工具箱

    在了解过世界最大的PHP站点,Facebook的后台技术后,今天我们来了解一个百万级PHP站点的网站架构:Poppen.de.Poppen.de是德国的一个社交网站,相对Facebook.Flickr ...

  9. mysql -- 重装mysql失败的解决办法

    最近遇到一些问题,将mysql卸载了重装,但总是出现安装不成功,应该是上一个mysql没卸载干净,于是各种找资料,前后弄了几个小时,终于给弄出来了,结合网上的资料,现总结如下: 1. 打开控制面板-添 ...

  10. enumerate遍历列表

    enumerate 函数用于遍历序列中的元素以及它们的下标: >>> for i,j in enumerate(('a','b','c')):  print i,j 0 a 1 b ...