React - 箭头函数 vs bind() 和带参数的事件

Question

我是反应的新手（即使是在 JS 中）。我在App课堂上编写了以下代码：

nameChangeHandler = (event, personId) => {
//method code
};

render()
{
  <div>
    {this.state.persons.map((person, index) => {
      return <Person
          // nameChangeHandler={(event) => this.nameChangeHandler(event, person.id)}
          nameChangeHandler={this.nameChangeHandler.bind(this, person.id)}
      />
    })}
  </div>
}

我正在传递nameChangeHandler给Person我onChange在input标记 ( <input type="text" onChange={props.nameChangeHandler}/>)中的事件中调用它的组件

当我以这种方式传递它时，应用程序工作正常：
nameChangeHandler={(event) => this.nameChangeHandler(event, person.id)}
但是当我这样做时它不会：
nameChangeHandler={this.nameChangeHandler.bind(this, person.id)}

它失败，一个异常时，我试图存取权限event.target.value的nameChangeHandler方法。

如何使用bind()方法而不是箭头函数将事件和参数传递给此方法？

我听说我们应该总是bind()在箭头函数上使用方法，因为箭头函数方法可以多次渲染组件。

bind()和箭头函数之间有什么特殊用例和区别吗？

Answer 1

这是时间问题。

当您使用 时bind，参数会按照您绑定它们的顺序映射到您正在绑定的函数，然后是传递给新函数的任何参数。

当您使用箭头函数时，您是按照您确定的顺序显式传递它们。

您的函数event应该是第一个参数，因此当您使用箭头时，您将传递event, person.id. 但是，当您绑定时，您传递person.id（第一个参数）并且当event您传递该函数时（作为第二个参数）调用该函数。

这意味着你的争论最终会以错误的方式结束。

由于您只有person.id在调用时才拥有，bind而event直到稍后才能获得，因此您可以使用的唯一方法bind是更改原始函数，以便它以不同的顺序接受参数。

nameChangeHandler = (personId, event) => {