React 如何一次向多个元素添加事件侦听器

Question

为了演示我的问题，我将比较普通的 javascript 和 React。在javascript中，当我有

<div>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>

我想为所有按钮添加一些功能，我可以这样做

const buttons = document.querySelectorAll(".btn");
buttons.forEach(btn=>{
   btn.addEventListener("click",(e)=>{
       //some code here
   })
})

在反应中，我怎样才能做同样的事情，而不是向每个按钮添加“onClick”？因为想象一下如果有 20 个这样的按钮：

<button className="btn" onClick={()=>{
   //some code here
}}>button</button>

我仍然可以像 javascript 那样使用 querySelector，但我听说这在 React 中是一个不好的做法。所以我想知道是否有其他方法可以使代码更清晰。

Answer 1

您可以使用事件委托将一个侦听器附加到容器，以在事件从每个子元素/组件“冒泡”到 DOM 时监视事件，而不是为每个按钮附加一个侦听器。

function Example() {

  function handleClick(e) {
    const { nodeName, textContent } = e.target;
    if (nodeName === 'BUTTON') {
      console.log(textContent);
    }
  }

  return (
    <div onClick={handleClick}>
      <button>Click me 1</button>
      <button>Click me 2</button>
      <button>Click me 3</button>
      <button>Click me 4</button>
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>