问题描述
在用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值' }) }
作者:X北辰北
链接:https://xuqwblog.blog.csdn.net/article/details/104060646
来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。