我有一个函数:
function clickButton(event, someArgument) {...}
我需要将它作为事件处理程序传递到我的 React 组件中。我正在尝试做这样的事情:
onClick={clickButton.bind(this, event, someArgument)}
但是没有定义可预测的事件。
应该有一些简单的解决方案。
最佳答案
要将附加数据传递给 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 进行了更多优化。
关于javascript - 如何将上下文绑定(bind)到事件处理程序,以便将事件和更多参数传递给处理程序函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43112557/