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

Question

我是 React 新手(即使是 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时，参数会按照您绑定(bind)它们的顺序映射到您要绑定(bind)的函数，后面是传递给新函数的任何参数。

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

您的函数期望 event 作为第一个参数，因此当您使用箭头时，您的函数会传递 event, person.id。但是，当您绑定(bind)时，您传递 person.id (第一个参数)，当使用 event 调用该函数时，您传递它(作为第二个参数)。

这意味着你们的争论最终会走向错误的方向。

因为当您调用 bind 时，您仅拥有 person.id 并且直到稍后，您可以使用 bind 实现此目的的唯一方法是更改原始函数，以便它以不同的顺序接受参数。

nameChangeHandler = (personId, event) => {