今天在学习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. 【Unity笔记】协程Coroutine的简单优化

    一个最简单的协程,也至少需要2帧才能完成.第一帧走到yield return null停止,第二帧从此处接着执行完下面的操作.需求:如果缓存中存在某数据则直接使用,否则联网异步下载. private ...

  2. mysql中使用正则表达式查询

    正则表达式功能确实很强大,那天专门抽空学学,这里就暂时在mysql查询中用用. 正则表达式强大而灵活,可以应用于非常复杂的查询. 选项 说明(自动加匹配二字) 例子 匹配值示例 ^ 文本开始字符 '^ ...

  3. C语言 · 提货单（P1101）

    算法训练 P1101   时间限制:1.0s   内存限制:256.0MB      有一份提货单,其数据项目有:商品名(MC).单价(DJ).数量(SL).定义一个结构体prut,其成员是上面的三项 ...

  4. error LNK2019: 无法解析的外部符号 WinMain，该符号在函数 "int __cdecl invoke_main(void)”中被引用

    一,问题描述 MSVCRTD.lib(exe_winmain.obj) : error LNK2019: 无法解析的外部符号 WinMain,该符号在函数 "int __cdecl invo ...

  5. 一站式学习Wireshark（六）：狙击网络高延时点

    在某些情况下,丢包可能并不是造成延时的原因.你可能会发现尽管两台主机之间通讯速度很慢,但这种慢速并没有伴随着TCP重传或是重复ACK的征兆.在这种情况下,需要使用另一种方式来定位高延时点. 查找高延时 ...

  6. C++实现顺序计算输入表达式的值

    #include <iostream> #include <cstring> #include <cctype>//判断字符类型需要的头文件 using names ...

  7. ipad safari 滚动（overflow）解决方案

    项目需要放到ipad应用了,发现有一个奇怪的问题,就是我div是设置滚动属性的,在pc上面的各个浏览器页面变小时,会出现滚动条,可是是ipad的safari,则不会滚动,开始以为是div的问题 但发现 ...

  8. 轻松使用jquery解析XML

    xml文件结构:books.xml <?xml version="1.0" encoding="UTF-8"?><root>    &l ...

  9. Hash表的表大小

    hash表的出现主要是为了对内存中数据的快速.随机的访问.它主要有三个关键点:Hash表的大小.Hash函数.冲突的解决. 这里首先谈谈第一点:Hash表的大小. Hash表的大小一般是定长的,如果太 ...

  10. t-SNE可视化(MNIST例子)

    如下所示: import pickle as pkl import numpy as np from matplotlib import pyplot as plt from tsne import ...