问题描述
在用react编写组件时,我们如果想为一个按钮绑定点击事件,按如下方法书写代码时并不会报错,而且绑定的点击事件也会顺利执行,但是我们如果想要在这个点击事件中调用setState()方法修改state的值时,发现代码执行后页面并没有如期渲染:
<button onClick={this._updatePropsEvent}>更新子组件的props</button>
_updatePropsEvent () {
this.setState({
propsName: '更新后的子组件props的name值'
})
}
解决方法
最后查阅官方文档,是这样解释的:在JSX回调中你必须注意this
的指向。在JavaScript中,类方法默认没有绑定的。如果你忘记绑定 this.handleClick
并将其传递给onClick
,那么在直接调用该函数时,this
会是undefined
。
弄清楚原因之后,我们就可以整理解决方法了,以下是提供的四种解决方法:
1、在ES6中可以在构造函数中,直接将当前组件(或者叫类)的实例与函数绑定。例如this.handleClick = this.handleClick.bind(this);
2、在方法调用的时候绑定this,如下:
<button onClick={this._updatePropsEvent.bind(this)}>更新子组件的props</button>
3、在方法编写结尾的时候绑定this,如下:
_updatePropsEvent () {
this.setState({
propsName: '更新后的子组件props的name值'
})
}.bind(this)
4、使用es6 箭头函数,如下:
_updatePropsEvent =() => {
this.setState({
propsName: '更新后的子组件props的name值'
})
}