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 组件对象。

热门相关:拳罡   墨桑   扑倒老公大人:龙总,我爱你!   陆先生偏要以婚相许   重生隐婚:Hi,高冷权少!