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

Question

我有一个函数:

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

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

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

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

应该有一些简单的解决方案。

Answer 1

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

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

当您使用箭头函数时，也不需要绑定(bind) this 值。

使用 bind，您可以尝试其他方法，但您也必须稍微修改您的处理程序函数:

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

function clickButton(someArgument, event) {

}

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

我机器上的结果如下:Opera 运行绑定(bind)函数比箭头函数快 30%。而 Firefox 显示两者之间没有区别。奇怪的是，Opera 确实在所有方面都获得了更高的分数。这可能意味着 Blink 目前比 Gecko 针对 ES6 进行了更多优化。