Question

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

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

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

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

events:
 'click .someclass': 'doSomething'

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

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

Answer 1

不需要此优化。如果您在其他库（如jQuery）中编码，但React会自动为您执行此操作。

我引用：

事件委托：React实际上并没有将事件处理程序附加到节点本身。当React启动时，它会使用单个事件侦听器开始侦听顶级的所有事件。安装或卸载组件时，只需在内部映射中添加或删除事件处理程序。当事件发生时，React知道如何使用此映射调度它。当映射中没有事件处理程序时，React的事件处理程序是简单的无操作程序。要详细了解为什么这么快，请参阅David Walsh's excellent blog post。

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

Answer 2

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

Public Function IsItInThere(r1 As Range, r2 As Range) As Boolean
   Dim v1 As String, v2 As String, CH As String
   Dim i As Long

   IsItInThere = False
   v1 = r1.Text
   v2 = r2.Text

   For i = 1 To Len(v1)
      CH = Mid(v1, i, 1)
      If InStr(v2, CH) = 0 Then
         Exit Function
      End If
   Next i
   IsItInThere = True
End Function

...事件处理程序根据事件对象<form onChange={this.handleChange}> {/* ...form elements... */} </form>确定要执行的操作：

.target

作为一个实例，我有<AutoForm> component使用此技术呈现handleChange(e) { this.setState({[e.target.name]: e.target.value}) }，它处理从更改的字段和提交的表单中提取数据。

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

2 个答案: