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

小编典典

reactjs

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

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

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

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

events:
 'click .someclass': 'doSomething'

骨干方式似乎更清洁，更易于管理。有没有办法使用React Components来模仿这种行为？

为了提供一些观点，我说过十几个或更多的表单元素，当它们中的任何一个更改时，我都希望潜在地运行一些逻辑。它们可能是文本框，单选按钮等。

阅读 262

2020-07-22

共1个答案

小编典典

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

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

…事件处理程序根据事件对象的来决定要做什么.target：

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

作为一个实时示例，我有一个使用此技术来呈现的<AutoForm>组件，该组件可以<form>为您处理从更改的字段和提交的表单中提取数据。

2020-07-22