React ES6组件里绑定this的三种方式
React可以使用React.createClass、ES6 classes、纯函数3种方式构建组件。使用React.createClass会自动绑定每个方法的this到当前组件,但使用ES6 classes或纯函数时,就要靠手动绑定this了。
bind(this)
Function.prototype.bind(thisArg [, arg1 [, arg2, …]]) 是ES5新增的函数扩展方法,bind()返回一个新的函数对象,该函数的this被绑定到thisArg上,并向事件处理器中传入参数
import React, {Component} from 'react'
class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}}add (v) {this.setState({count:this.state.count+v})}render () {return (<div><button onClick={this.add.bind(this,3)}>add</button></div>)}
}
构造函数内绑定
在构造函数 constructor 内绑定this,好处是仅需要绑定一次,避免每次渲染时都要重新绑定,函数在别处复用时也无需再次绑定
import React, {Component} from 'react'
class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}this.add=this.add.bind(this)}add () {this.setState({count:this.state.count+1})}render () {return (<div><button onClick={this.add}>add</button></div>)}
}
箭头函数
箭头函数则会捕获其所在上下文的this值,作为自己的this值
1:
import React, {Component} from 'react'
class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}}add () {this.setState({count:this.state.count+1})}render () {return (<div><button onClick={()=>{this.add()}}>add</button></div>)}
}
2:
在Classes中直接赋值是ES7的写法,ES6并不支持,需要安装npm install --save-dev babel-preset-stage-2
//.babelrc"presets":["react","env","stage-2"]
import React, {Component} from 'react'
class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}}add=()=>{this.setState({count:this.state.count+1})}render () {return (<div><button onClick={this.add}>add</button></div>)}
}
3:只用es6
import React, {Component} from 'react'
class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}this.add=()=>{this.setState({count:this.state.count+1})}}render () {return (<div><button onClick={this.add}>add</button></div>)}
}
React ES6组件里绑定this的三种方式相关推荐
- React绑定this的三种方式
转载自 React绑定this的三种方式 React可以使用React.createClass.ES6 classes.纯函数3种方式构建组件.使用React.createClass会自动绑定每个方 ...
- java c 事件对比_javacsript绑定事件的三种方式与各自特点
javacsript绑定事件的三种方式与各自特点 javacsript绑定事件的三种方式与各自特点 点击打开链接 javacsript绑定事件的三种方式与各自特点 feipeng8848 2017-0 ...
- XtraReport绑定数据源的三种方式
一 .report.datasource直接放一个dataset或datatable 此种方法在代码里实现,直接为report赋数据源 特点: -无须生成xml -生成模板文件.repx中不包含表结构 ...
- Vue--vant-cell单元格组件跳转路由的三种方式
//第一种 采用拼接字符串的方法传递动态参数 :to="/article/+article.art_id" //第二种 采用模板字符串的方法传递参数 :to="`/art ...
- 【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2242.html ...
- 在ABAP里实现条件断点的三种方式
背景 有不同的同事问我这个问题:例如下图的LOOP要执行1000次,我只对其中的某一次比如第501次循环感兴趣,我肯定不可能按500次F5然后进入第501次的调试.或者我只对LOOP里某个变量为某一个 ...
- android如何绑定事件,Android_安卓为按钮控件绑定事件的五种方式
一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...
- Vue路由传参三种方式
Vue路由传参三种方式 params传参 路由属性配置传参 query传参 一.params传参 this.$router.push({ name:"admin", //这里的pa ...
- React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
最新文章
- linux消息信号丢失,Linux信号丢失问题分析
- python可以干嘛用-Python可以被用来做哪些神奇好玩的事情
- bond、服务器登录、跟踪数据包的路由
- Spring事务传播行为详解
- 蓝桥杯Java历年真题与答案_蓝桥杯大赛java历年真题及答案整理(闭关一个月呕心沥血整理出来的)...
- 处理android11以上无法删除相册图片的问题
- 数据结构-Huffman树
- layui弹出层:使用icon图标小结
- 转:配置 SQL Server 2005 远程调试存储过程
- 数据湖存储格式Hudi原理与实践
- python中init是什么_详细解读Python中的__init__()方法
- MINGW里面没有mingw32 make.exe
- 查看APK文件源代码
- es拼音分词 大帅哥_Elasticsearch中文分词加拼音
- 宝塔备份文件到ftp服务器上,宝塔自动备份网站到FTP空间,宝塔备份ftp空间
- 拉姆达Lambda表达式对list分页,获取list总页数
- 一篇可以终结房价涨跌讨论的文章(…
- 光照度和光强度的区别
- wireshark选择网卡出错解决方法The capture session could not be initiated on interface ‘en0‘ (You don‘t have ...
- 40G SR4 vs 40G BIDI vs 40G UNIV:你选哪个?