Question

所以，我一直在寻找将参数对象和事件对象传递给react中的事件处理程序的正确方法。有最好的做法吗？

我找到的唯一方法是使用箭头函数并传入事件对象和参数，就像这样。

<Button onClick={(e) => this.updateProgress(e, 1)} >Increase</Button>

由于在某些情况下可能存在多个回调绑定，因此官方文档不鼓励这样做。

https://facebook.github.io/react/docs/handling-events.html

有没有办法将事件对象和事件args对象传递给事件处理程序而不使用箭头函数？

Answer 1

我从来没有积极劝阻过。您所指的文档部分是当您没有传递额外参数时。

当传递参数时，您呈现的方式正是这样做的方式。

编辑例外情况是参数是某种常数（我不能想到它们会出现的情况，只是标记）。

这种模式（你提出的模式）对于循环中的处理程序尤为重要，其中每个项目需要调用回调/处理程序，但需要转发id或键或索引。

Answer 2

另一种方法是使用.bind，但不建议这样做，因为每次render()调用都会创建一个新功能。

updateProgress(arg, event) {
  console.log(arg, event); // Prints: 1 Proxy {dispatchConfig: Object ...
}

render() {
  return
    ...
    <Button onClick={this.updateProgress.bind(this, 1)}>Increase</Button>
}

在ReactJS中将事件args和事件对象传递给没有箭头功能的事件处理程序

2 个答案: