将事件参数和事件对象传递给ReactJS中没有箭头函数的事件处理函数

因此，我一直在寻找将参数对象和事件对象传递给事件处理函数的正确方法。有最佳做法吗？将事件参数和事件对象传递给ReactJS中没有箭头函数的事件处理函数

我发现的唯一方法是使用箭头函数并传递事件对象和参数，就像这样。

<Button onClick={(e) => this.updateProgress(e, 1)} >Increase</Button>

由于在某些情况下可能存在多个回调绑定，因此官方文档不鼓励。

https://facebook.github.io/react/docs/handling-events.html

有没有办法通过沿两个事件对象和事件参数对象的事件处理程序，而无需使用箭头功能？

来源

2017-03-05 Molotch

是的，你可以调用一个函数调用另一个函数的参数。这将更加混乱 –

@ArshabhAgarwal我看到一个博客文章，看起来很混乱。 – Molotch

是的！只要做你现在正在做的事情。下面的答案是非常正确的。 –

我从来没有积极劝阻过。你提到的那部分文档是你在不是传递额外的参数。

当您的是传递参数时，您提供的方式正是完成此操作的方式。

编辑唯一的例外是，如果争论在某种程度上常数（我想不出的情况时，他们会是这样，只是标记）。

这种模式（您提供的模式）对于循环内的处理程序非常重要，其中每个项目需要调用回调/处理程序，但是在id或键或索引上进行转发。

来源

2017-03-05 12:50:03 Chris

谢谢，一般认为它是气馁，但如果没有更好的方法来传递参数，我想这是一条路。 – Molotch

另一种方法是使用.bind，但不建议这样做，因为在每个render()调用中都会创建一个新函数。

updateProgress(arg, event) { 
    console.log(arg, event); // Prints: 1 Proxy {dispatchConfig: Object ... 
} 

render() { 
    return 
    ... 
    <Button onClick={this.updateProgress.bind(this, 1)}>Increase</Button> 
}

来源

2017-03-05 17:23:31

这不是更糟？它绑定每个按钮点击，而不仅仅是每个渲染？或者我误解了？ – Molotch

这是正确的，它绑定在每个渲染上。每个按钮点击调用绑定函数updateProgress –

这基本上是一样的东西;一个箭头函数也会在每个'render（）'调用上创建一个新函数。箭头函数的主要优点是可以说它有更清晰的语法。 –

将事件参数和事件对象传递给ReactJS中没有箭头函数的事件处理函数

回答

相关问题