我是 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()
之间是否有任何特殊用例和差异和箭头函数?
最佳答案
这只是时间问题。
当您使用bind
时,参数会按照您绑定(bind)它们的顺序映射到您要绑定(bind)的函数,后面是传递给新函数的任何参数。
当您使用箭头函数时,您将按照您确定的顺序显式传递它们。
您的函数期望 event
作为第一个参数,因此当您使用箭头时,您的函数会传递 event, person.id
。但是,当您绑定(bind)时,您传递 person.id
(第一个参数),当使用 event
调用该函数时,您传递它(作为第二个参数)。
这意味着你们的争论最终会走向错误的方向。
因为当您调用 bind
时,您仅拥有 person.id
并且直到稍后,您可以使用 bind
实现此目的的唯一方法是更改原始函数,以便它以不同的顺序接受参数。
nameChangeHandler = (personId, event) => {
关于javascript - React - 箭头函数与 bind() 和带参数的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55633326/