React如何进行事件传参
今天在学习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如何进行事件传参的更多相关文章
- react router @4 和 vue路由 详解(五)react怎么通过路由传参
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...
- react事件绑定，事件传参，input单向数据绑定
import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...
- 微信小程序：bindtap等事件传参
事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, data ...
- 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等
一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...
- wpf 用户自定义事件传参
//自定义传参 ,对外联系的参数 public class ImageZoomChangedEventArgs : RoutedEventArgs { /// <summary> /// ...
- 微信小程序 - bindtap等事件传参
什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, ...
- JS中onclick事件传参
美术馆案例中,需要将“增加一个img标签,放入大图片”这样一个函数封装,但是在调用的时候需要传参. <script type="text/javascript"> on ...
- React跳转路由传参3种方法和区别
1.params传参 路由表配置:参数地址栏显示 路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:i ...
- React 事件 传参
绑定事件用 bind方法,第一个参数是 this,第二个参数是需要传入的值如下: <a onClick={this.updateLabel.bind(this,'参数1','参数2')} > ...
随机推荐
- Excel VBA 操作 Word（入门篇）
原文地址 本文的对象是:有一定Excel VBA基础,对Word VBA还没有什么认识,想在Excel中通过VBA操作Word还有困难的人. 一.新建Word引用 需要首先创建一个对 Word A ...
- 一款手机端的jQuery图片滑块插件
今天我们要介绍一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式, ...
- Java面向对象编程：封装，继承，多态
Java面向对象的三大特征: 封装:通过Java的类来实现数据和操作方法的封装,对外界可以将每一个Java类都视为一个黑箱,只需调用该黑箱提供的方法即可完成你想要的操作. 继承:通过类的继承,将统一的 ...
- C语言 · 三角形
算法提高 12-1三角形 时间限制:1.0s 内存限制:256.0MB 问题描述 为二维空间中的点设计一个结构体,在此基础上为三角形设计一个结构体.分别设计独立的函数计算三角形的周长 ...
- Ubuntu 下查看中文man手册方法
转载自:http://blog.chinaunix.net/uid-24830506-id-3266493.html Ubuntu 中文man手册安装方法 分类: LINUX Ubuntu 下查看中文 ...
- 分布式理论(4):Leases 一种解决分布式缓存一致性的高效容错机制(转)
作者:Cary G.Gray and David R. Cheriton 1989 译者:phylips@bmy 2011-5-7 出处:http://duanple.blog.163.com/blo ...
- ScriptX使用
自己研究了一下ScriptX并且做了个事例,希望可以帮到需要的同学 下载地址: http://download.csdn.net/detail/jine515073/7234575
- OC基础--常用类的初步介绍与简单实用之集合类
集合类的异同点 一.NSArray\NSMutableArray *有序 *快速创建(只有不可变数组可以):@[obj1, obj2, obj3]; *快速访问元素:数组名[i] *只能存放对象 二. ...
- Using org.hibernate.id.UUIDHexGenerator which does not generate IETF RFC 4122 compliant UUID values;
项目部署,启动过程中有以下警告: [WARN]: Using org.hibernate.id.UUIDHexGenerator which does not generate IETF RFC 41 ...
- mvn 仓库地址修改
默认仓库的存储位置 Maven缺省的本地仓库路径为${user.home}/.m2/repository具体如下图 自定义修改仓库的存储位置: 可改变默认的 .m2 目录下的默认本地存储库文件夹通过修 ...