关于react中this丢失的解决方法

问题描述

在用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值'
        })
 }