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

矫情吗；* 2023-07-01 10:54 6阅读 0赞

### 问题描述 ###

在用react编写组件时，我们如果想为一个按钮绑定点击事件，按如下方法书写代码时并不会报错，而且绑定的点击事件也会顺利执行，但是我们如果想要在这个点击事件中调用setState()方法修改state的值时，发现代码执行后页面并没有如期渲染：

<button onClick={this._updatePropsEvent}>更新子组件的props</button>

_updatePropsEvent () {
            this.setState({
                propsName: '更新后的子组件props的name值'
            })
        }

### 解决方法 ###

最后查阅[官方文档][Link 1]，是这样解释的：在JSX回调中你必须注意`this`的指向。在JavaScript中，类方法默认没有[绑定][Link 2]的。如果你忘记绑定 `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值'
            })
     }

[Link 1]: http://react.html.cn/docs/handling-events.html
[Link 2]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind