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

Question

我有一个功能：

clientService.callService(url)

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

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

但事件未定义为可预测的。

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

Answer 1

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

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

当您使用箭头功能时，不需要绑定this值。

使用bind，你可以尝试别的东西，但是你也必须修改你的处理函数：

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

function clickButton(someArgument, event) {

}

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

我机器上的结果如下： Opera运行绑定函数比箭头函数快30％。虽然Firefox显示两者没有区别。奇怪的是，Opera确实获得了更高的分数。这可能意味着Blink目前比ESck更适合ES6。

Answer 2

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

请参阅React synthetic event