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')} > ...
随机推荐
- Curator入门教程1
简介 Curator是Netflix开源的一套ZooKeeper客户端框架. Netflix在使用ZooKeeper的过程中发现ZooKeeper自带的客户端太底层, 应用方在使用的时候需要自己处理 ...
- mysql的onestart和start区别
在FreeBSD上安装了mysql5.7之后,启动mysql时报了如下的错误: root@tuhooo:~ # /usr/local/etc/rc.d/mysql-server start Canno ...
- Log4j 2使用教程<转>
Log4j 2的好处就不和大家说了,如果你搜了2,说明你对他已经有一定的了解,并且想用它,所以这里直接就上手了. 1. 去官方下载log4j 2,导入jar包,基本上你只需要导入下面两个jar包就可以 ...
- FusionCharts JavaScript API Column 3D Chart
Column 3D Chart labelDisplay label显示的方式 设置为AUTO 可以根据密度自动排列 slantLabels 0/1 与labelDisplay配合使用 如果lab ...
- 第一次使用bootstrap3做的响应式网站
第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站 作为一个后台程序员觉得得界面做得还可以, 按以前是只能自己看看了 时间线来自国外网站,使用到的css如 ...
- oozie中使用sqoop导入hive表时提示hive找不到
根据出错信息是找不到hive的位置,所以想到的解决方法是: 在sqoop的workflow中添加job-xml,属性写hive-site.xml在hdfs上的位置. (fail) 直接配置一个hive ...
- NTP原理
ntp原理与设置 原创 2016年09月17日 15:28:16 标签: ntp / 原理 / 设置 / linux / 时钟同 ...
- 格林威治时间格式(GMT)与普通时间格式的互相转换
GMT --> 普通时间格式: 方法: function GMTToStr(time){ var date = new Date(time) var Str=date.getFullYear() ...
- 关于Cocos2d-x中根据分数增加游戏难度的方法
1.GameScene.h中声明一些分数边界值 //level提升所需的分数 enum LevelUp_Score { Level1Up_Score = , Level2Up_Score = , Le ...
- Linux之查看文件大小和数目
1.查看当前文件大小du -sh ./ du [-abcDhHklmsSx] [-L <符号连接>][-X <文件>][--block-size][--exclude=< ...