如何将上下文绑定到事件处理程序，以便事件和传递给处理程序函数的更多参数

Question

我有一个函数：

function clickButton(event, someArgument) {...}

我需要将其作为事件处理程序传递到我的 React 组件中。我正在尝试做这样的事情：

onClick={clickButton.bind(this, event, someArgument)}

但是事件没有被定义为可预测的。

应该有一些微不足道的解决方案。

Answer 1

要将其他数据传递给 React 中的事件处理程序，您可以使用箭头函数。这将是最常见的解决方案，但我也会为您提供仅使用绑定的解决方案。

onClick={event => clickButton(event, someArgument)}

由于使用的是箭头函数，因此也不需要绑定this值。

使用 bind，您可以尝试其他操作，但您还必须稍微修改您的处理程序函数：

onClick={clickButton.bind(this, someArgument)}
function clickButton(someArgument, event) {
}

就个人而言，我认为箭头函数更容易阅读，但这个 JSPerf 表明绑定函数的性能更高，至少在撰写本文时是这样。

在我的机器上的结果如下：Opera 运行绑定函数的速度比箭头函数快 30%。而火狐在两者之间没有显示出任何区别。奇怪的是，Opera确实获得了更高的分数。这可能意味着Blink目前比Gecko更针对ES6进行了优化。

Answer 2

只需写onClick={clickButton.bind(this)}，事件将作为参数传递给clickButton

参见 React 合成事件