react关于类组件this指向-Toy模板网

这篇具有很好参考价值的文章主要介绍了react关于类组件this指向。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章目录

前言：

绑定方式：

一、手动绑定 this:

二、使用箭头函数:

常见问题：

总结：

前言：

在 React 中，类组件中 this 的指向和普通的 JavaScript 类相同，指向当前实例对象。但是，在事件处理函数中，this 的指向会有所不同。

当我们使用类组件的时候，事件处理函数中的 this 默认指向 undefined。为了保证 this 指向类组件实例对象，我们需要手动绑定 this，或者使用箭头函数。

绑定方式：

一、手动绑定 this:

class MyComponent extends React.Component {
  handleClick() {
    // do something
  }
  
  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Click me</button>
    );
  }
}

二、使用箭头函数:

class MyComponent extends React.Component {
  handleClick = () => {
    // do something
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

在上面的例子中，我们使用了箭头函数来定义事件处理函数 handleClick，这样就可以保证 this 指向类组件实例对象。