React事件处理程序中未定义“ this”背后的原因

Question

我们都知道this根据React的给定代码是不确定的。对于此问题，我们有许多解决方案，例如绑定，箭头功能等。我想知道此行为背后的原因。请 说明this参考的行为原因 ，而不是解决方法。

class Foo extends Component {

   clickHandler() {
      console.log(this);
   }

   render() {
      return <button onClick = {this.clickHandler}> Click Me </button>;
   }

}

Answer 1

1）this.clickHandler = this.clickHandler.bind（this）返回一个新函数，其中对“ this”的引用将引用该函数，这是保存this的当前值的方式，调用构造函数，以便以后可以调用该函数。 如果我们的函数不需要访问您组件的状态，那么请确保您不需要绑定此状态。

2）arrow函数会自动绑定它，这就是为什么我们不需要使用.bind（）方法的原因。