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

Question

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

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

当我们处理几十个元素时,是否有一种有效的方法(不向每个元素添加onClick)？

例如,在我的主干应用程序中,我只是将一个处理程序应用于一个类:

events:
 'click .someclass': 'doSomething'

骨干方式似乎更清洁,更易于管理.有没有办法用React组件模拟这种行为？

为了添加一些透视图,我已经说了十几个或更多的表单元素,当它们中的任何一个被更改时,我希望可能运行一些逻辑.它们可以是文本框,单选按钮等.

Answer 1

不需要此优化。如果您正在使用其他库（例如jQuery）进行编码，那么React会自动为您执行此操作。

我引用：

事件委托：React实际上并未将事件处理程序附加到节点本身。当React启动时，它开始使用单个事件监听器在顶层监听所有事件。在安装或卸载组件时，只需简单地从内部映射中添加或删除事件处理程序即可。当事件发生时，React知道如何使用此映射进行调度。当映射中没有事件处理程序时，React的事件处理程序就是简单的无操作。要了解有关为何如此快速的更多信息，请参阅David Walsh的出色博客文章。

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

Answer 2

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

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

...事件处理程序根据事件对象确定要执行的操作.target：

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

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