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

这是时间问题。

当您使用path.offset(-30,30);时，参数将按您绑定它们的顺序映射到您要绑定的函数，然后按跟随的顺序传递给新函数。

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

您的函数期望bind为 first 参数，因此，当您使用箭头时，可以传递event。但是，在绑定时，您传递event, person.id（第一个参数），并在函数中使用person.id调用时，您传递该参数（作为第二个参数）。

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

由于您在致电event时只有个person.id，直到以后您都没有收到bind，因此使用{{1 }}的目的是更改原始功能，以便它以不同的顺序接受参数。

event

反应-箭头函数vs bind（）和带参数的事件

1 个答案: