Javascript 未定义的原因'；这'；in-React事件处理程序

我们都知道，

根据给定的React代码，此

将是未定义的。对于这个问题，我们有很多解决方案，比如绑定、箭头函数等等。我想知道这种行为背后的原因。请解释

此

参考行为的原因，而不是解决方案

class Foo extends Component {

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

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

}

类Foo扩展组件{
clickHandler（）{
console.log（this）；
}
render（）{
返回点击我；
}
}

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

---

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

事实上，我认为

这个

必须是对创建的按钮的引用。这就是它在普通javascript中的行为。但是在这里，在这段代码中，

这个

是未定义的，出乎意料。我想了解它的原因。看看这里@MuhammadMuaaz，通过这个，你会得到更多的澄清谢谢你，@Harish。此链接在使用

此

时有很大帮助。也感谢@Vahid Akhtar。