为什么我们需要在反应中绑定事件处理程序

Question

我知道你可能觉得这是一个多余的问题，但请听我说完。

我正在使用 React class 组件，我刚刚了解到我们需要在组件的构造函数中绑定一个事件处理函数，以便在事件处理程序中访问 this.setState()。现在根据我对 JavaScript classes 的了解，this 可以通过 class.

中的任何方法访问

为了证明我在说什么，这里是代码：

class Parent {
  setState() {
    console.log("Set State is called");
  }
}

class Child extends Parent {
  eventHandler() {
    this.setState();
  }

  render() {
    console.log("Render method called");
    console.log("assume an event happened and event handler is called");
    this.eventHandler();
  }
}

new Child().render()

以上代码的输出为：

Render method called
assume an event happened and event handler is called
Set State is called

将上面的代码与 React 的工作方式进行对比（即假设 setState 是 class React.Component 中定义的方法），为什么当 this.setState() 在事件处理程序中被调用？

Answer 1

我错过的关键点是 class 中定义的方法在重新分配时会丢失其上下文。

所以当我们这样做时，

<SomeComponent onClick={eventHandler} />

eventHandler 被重新分配给其他一些变量，并由 React 内部调用。由于这种重新分配，eventHandler 将失去其上下文，并且在内部被 React 调用时，它不会有 this.

要明确地将 this 绑定到 eventHandler 以便它即使在重新分配后也不会丢失其上下文，我们这样做：

this.eventHandler = this.eventHandler.bind(this)

请参阅 this 文章以获得深入的解释。

为什么我们需要在反应中绑定事件处理程序

Why do we need to bind a event handler in react

javascript

bind

reactjs