React JSX：如何避免多个元素的多个 onClick 处理程序答案

【问题标题】：React JSX: How to avoid multiple onClick handlers for multiple elementsReact JSX：如何避免多个元素的多个 onClick 处理程序
【发布时间】：2019-01-25 15:52:25
【问题描述】：

React 新手，来自 JS/jQuery 领域。感觉我已经掌握了基础知识，但是经过相当多的搜索，找不到以下问题的答案。在 jQuery 中，我可以将同一个事件处理程序绑定到多个子元素：

$("#someId p").on("click", someFunction);

在 React JSX 中，我只知道如何做以下事情，这严重违反了 DRY，让我想起了我多年前写的代码：

<div id="someId">
   <p onClick={this.someFunction}>Foo</p>
   <p onClick={this.someFunction}>Bar</p>
   <p onClick={this.someFunction}>Baz</p>
</div>

一定有更好的方法，是吗？

【问题讨论】：

将 onclick 添加到父元素并让事件传播冒泡，然后在处理程序中检查事件的目标。

标签： reactjs jsx

【解决方案1】：

你可以把这些 p 标签放在 list 中，然后使用 map 函数来渲染它们。

let items=['foo','bar','baz'];

<div id="someId">
     {items.map((a,index)=>{
         return (
              <p key={index} onClick={(event)=>this.someFunction(event,index)}>{a}</p>
         );
      })}
</div>

【讨论】：

是的，就是这样，谢谢！我一直在使用 map() 来呈现 API 数据，没想到将它用于我自己的本地字符串/元素。