react 事件函数中 this 绑定问题

在使用类方式创建组件时，类中定义一个函数，并且绑定到元素的点击事件上，此时这个函数中this指向并不是当前这个组件。

组件代码如下：

class App extends React.Component {         // 组件数据         constructor() {           super()           this.state = {             message: 'hello world',           }         }         // 点击函数         btnClick() {           this.setState({             message: 'hello react',           })         } 		// 渲染函数         render() {           return (             <div>               <h2>{this.state.message}</h2>               <button onClick={this.btnClick}> 	              修改文本               </button>             </div>           )         }       } 

如上代码中，点击修改文本按钮，会发生如下报错

Uncaught TypeError: Cannot read properties of undefined (reading 'setState')

提示 undefined 找不到 setState 方法。

主要原因如下：

1. 默认情况下btnClick内的this是绑定的是undefined，熟悉this绑定的应该知道，this是绑定运行时调用这个函数的对象，this绑定详解可以查看：https://www.cnblogs.com/easy1996/p/17954257；
2. 在正常的DOM操作中，监听点击，调用监听函数的其实是节点对象，比如上面的按钮对象；
3. 在React中，并不是直接渲染真实的DOM，render渲染函数中所编写的button只是一个语法糖，最终会编译成 React.createElement("button", {onClick: this.btnClick})；
4. 同时会将 btnClick 函数暴露出来，以 const click = onClick(伪代码) 的形式；
5. 当点击事件触发时，react执行上面的 click 函数，默认里面this就是绑定的undefined，相当于window中调用函数(严格模式下为 undefined)；

解决方法：
知道了问题在于 this 的绑定不对，有三种方式解决：

1.给点击函数显式绑定 this

class App extends React.Component {         constructor() {           super()           this.state = {             message: 'hello world',           }           // 位置1.在此处重新给点击函数绑定this为组件对象           this.btnClick = this.btnClick.bind(this)         }         btnClick() {           this.setState({             message: 'hello react',           })         }         render() {           return (             <div>               <h2>{this.state.message}</h2>               {/* 位置2.直接在渲染函数中重新绑定this */}               <button onClick={this.btnClick.bind(this)}> 	              修改文本               </button>             </div>           )         }       } 

在上面两个位置任选一个重新绑定 this 为组件对象即可。

2.使用 ES6 class field

class App extends React.Component {         constructor() {           super()           this.state = {             message: 'hello world',           }         }         // class field         btnClick = () => {           this.setState({             message: 'hello react',           })         }         render() {           return (             <div>               <h2>{this.state.message}</h2>               <button onClick={this.btnClick}>修改文本</button>             </div>           )         }       } 

上面使用 class field的方式，给 btnClick 赋值一个箭头函数，箭头函数默认绑定当前环境的 this。

3.直接在按钮上使用箭头函数(推荐)

class App extends React.Component {         constructor() {           super()           this.state = {             message: 'hello world',           }         }         btnClick() {           this.setState({             message: 'hello react',           })         }         render() {           return (             <div>               <h2>{this.state.message}</h2>               {/* 直接绑定箭头函数 */}               <button onClick={() => this.btnClick()}>修改文本</button>             </div>           )         }       } 

再看一下此时执行的流程：

1. onClick 绑定的是一个箭头函数，箭头函数的 this 绑定的是App组件对象；
2. 前面的两个例子中是将这个函数引用赋值给 onClick，等待按钮事件点击，然后再触发这个引用的函数，onClick={this.btnClick}；
3. 而上面的代码中，是 onClick={() => this.btnClick()}，是将 () => this.btnClick() 这个箭头函数赋值给 onClick，按钮点击触发这个箭头函数，而箭头函数内部是一个已经调用过的 btnClick() 函数，包含 () ，调用时在箭头函数内部，所有 this 绑定的是 App 组件对象。