反应将事件绑定到许多 dom 元素的有效方法

Question

因为我们将 onClick 处理程序直接添加到组件...例如：

<button onClick={dosomething}>Click</button>

当我们处理几十个元素时，有没有一种有效的方法来做到这一点（不向每个元素添加 onClick）？

例如，在我的 backbone 应用程序中，我只是将处理程序应用于 class:

events:
 'click .someclass': 'doSomething'

backbone 方式似乎更简洁，更易于管理。有没有办法用 React Components 模拟这种行为？

为了增加一些观点，我说了十几个或更多的表单元素，当它们中的任何一个发生变化时，我想潜在地运行一些逻辑。它们可以是文本框、单选按钮等。

Answer 1

您可以将事件处理程序应用到公共父元素并在那里处理事件：

<form onChange={this.handleChange}>
  {/* ...form elements... */}
</form>

...事件处理程序根据事件对象的 .target:

确定要执行的操作

handleChange(e) {
  this.setState({[e.target.name]: e.target.value})
}

作为一个活生生的例子，我有一个 <AutoForm> component，它使用这种技术来呈现一个 <form>，它为您处理从更改的字段和提交的表单中提取数据。

Answer 2

不需要这个优化。如果您在 jQuery 等其他库中编码，它会这样做，但 React 会自动为您完成此操作。

我引用：

Event delegation: React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see David Walsh's excellent blog post.

看到这里：https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

反应将事件绑定到许多 dom 元素的有效方法

React efficient way to bind event to many dom elements

reactjs