今天在学习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. LeetCode103 BinaryTreeZigzagLevelOrderTraversal(二叉树Z形层次遍历) Java题解

    题目: Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from lef ...

  2. 【转】Visual Studio常用快捷键

    Shift+Alt+Enter: 切换全屏编辑   Ctrl+B,T / Ctrl+K,K: 切换书签开关 Ctrl+B,N / Ctrl+K,N: 移动到下一书签 Ctrl+B,P: 移动到上一书签 ...

  3. IP数据包格式

    IP数据包格式 0 4 8 16 31 |4位版本 | 4位首部长度 | 8位服务类型 | 16位总长度(字节数)| |16位标识 | 3位标志 | 13位片偏移 | |8位生存时间| 8位协议 | ...

  4. Ubuntu下，dpkg安装出错的修复

    参考 http://www.khattam.info/2009/08/04/solved-subprocess-pre-removal-script-returned-error-exit-statu ...

  5. 解决国内经常无法访问Google的方法

    1.可用http://www.google.ws访问. 2.可用https安全协议https://www.google.com.hk访问. 3.也可用http://+谷歌IP访问(http://74. ...

  6. 使用DroneKit控制无人机

    DroneKit-Python是一个用于控制无人机的Python库.DroneKit提供了用于控制无人机的API,其代码独立于飞控,单独运行在机载电脑(Companion Computer)或其他设备 ...

  7. LINQ教程一：LINQ简介

    一.为什么要使用LINQ 要理解为什么使用LINQ,先来看下面一个例子.假设有一个整数类型的数组,找到里面的偶数并进行降序排序. 在C#2.0以前,如果要实现这样的功能,我们必须使用'foreach' ...

  8. laravel 5.1 的程序性能优化(配置文件)

    命令优化 本文的目的是来弄清楚一些优化命令在 Laravel 5.1 和之前版本之间的差别. 在 15年6月发布的 Laravel 5.1版本中, 命令和他们的逻辑方法被清理掉, 本文章就是描述这些不 ...

  9. Hibernate Query Language查询：

    Hibernate Query Language查询: Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(Hibernate Query Language)查询提供 ...

  10. MySQL常用shell语句

    1.连接数据库 格式:mysql -h ip -P port -u user -p 2.修改某一列的值 格式:update tablename set column1 = 'xxx', column2 ...