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

时间:2019-11-05 06:40:02

标签: javascript reactjs this

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

class Foo extends Component {

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

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

}

1 个答案:

答案 0 :(得分:0)

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

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