Javascript 如何将上下文绑定到事件处理程序，以便将事件和其他几个参数传递给处理程序函数

我有一个功能：

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

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

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

但事件并没有定义为可预测的

---

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

只需编写

onClick={clickButton.bind（this）}

，事件将作为参数传递给

clickButton

---

请参见

要在React中将附加数据传递给事件处理程序，可以使用arrow函数。这将是最常见的解决方案，但我还将为您提供一个仅使用bind的解决方案

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

在使用arrow函数时，也不需要绑定

此

值

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

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

function clickButton(someArgument, event) {

}

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

在我的机器上的结果如下：

---

Opera运行绑定函数的速度比arrow函数快30%。而Firefox则没有显示出两者之间的差异。奇怪的是，歌剧确实获得了更高的分数。这可能意味着Blink目前比Gecko更适合ES6。

是的，但我如何传递更多参数？请参见描述中的函数声明。关于这一点，请参见下面的@Stephan Bijzitter solution:）是的，但这是我评论它时唯一的答案：）执行内联lambda函数会为每个渲染周期创建一个新的函数签名。这使得react每次都重新渲染所有内容。这不是一个最佳解决方案，因为

someArgument

很可能是一个引用不断变化的对象（否则它可能只是类的

const

成员），

bind

将（据我所知）具有完全相同的情况，因为绑定所做的一切就是返回一个带有绑定值的新函数。@JohnRuddell（至少在编写本文时）似乎认为

bind

确实更有效。不确定这是因为箭头功能仍然是新的，可以从浏览器的更多优化中获益，还是因为它的速度明显较慢。但是我创建了一个JSPert来证明在Opera中使用

bind

的速度快了30%（同样是在撰写本文时）。您能给我们提供一个指向您创建的JSPert的链接吗？^它添加到了答案中：-）