React - Arrow函数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)}

当我试图在qazxsw poi方法中访问qazxsw poi时，它失败了。

如何使用event.target.value方法而不是箭头函数将事件和参数传递给此方法？

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

bind()和箭头功能之间是否有任何特殊用例和区别？

Answer 1

这是一个时间问题。

当您使用bind()时，参数映射到您按绑定顺序绑定的函数，然后映射到传递给新函数的任何函数。

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

你的函数期望bind()成为第一个参数，所以当你使用箭头时你运行bind。但是，当你绑定时，你传递event（第一个参数），当用event, person.id调用函数时，你传递它（作为第二个参数）。

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

因为当你调用person.id时你只有event并且你直到稍后才得到person.id，你可以使用bind的唯一方法就是更改原始函数，使它以不同的顺序接受参数。

event