React中如何不逐个绑定onclick实现按钮点击事件注册？

你要的效果用事件委托实现就行，完全不需要给30个按钮逐个绑定事件监听器。
你之前写的jQuery写法本质是遍历所有匹配到的button元素，给每个按钮都单独绑了点击事件，不算真正的委托，按钮数量多的时候反而会产生不必要的内存开销，现在已经不推荐这么写了。

实现原理 #

利用DOM事件天然的冒泡机制：点击按钮时，事件会从触发的按钮逐层向上冒泡到共同的父级元素。你只需要在所有按钮的共同父容器上绑定1个点击事件监听器，在事件回调里判断实际触发的元素是不是目标按钮，再读取按钮上提前存好的差异化参数，执行对应逻辑即可。

具体实现代码 #

1. 把所有按钮放在同一个父容器下，给父容器绑定唯一的点击事件，每个按钮通过data-*自定义属性存自己的专属参数/逻辑标识：

// 父容器绑定统一的点击事件
<div className="btn-wrapper" onClick={handleGroupButtonClick}>
  {/* 每个按钮通过data属性存自己的差异化参数，不需要单独绑onClick */}
  <button data-user-id="1">查询1号用户</button>
  <button data-user-id="2">查询2号用户</button>
  {/* 其余同类型用户查询按钮... */}
  <button data-action="reset">重置页面</button>
  <button data-action="export">导出数据</button>
</div>

2. 编写父容器上的统一事件处理函数：

const handleGroupButtonClick = (e) => {
  // 向上查找最近的button元素，兼容按钮内嵌套图标、文字等子元素的场景
  const clickedBtn = e.target.closest('button');
  // 点击的不是容器内的按钮直接返回，不执行后续逻辑
  if (!clickedBtn) return;

  // 读取按钮上的自定义属性
  const { userId, action } = clickedBtn.dataset;

  // 根据参数执行对应按钮的专属逻辑
  if (userId) {
    fetch(`https://reqres.in/api/users/${userId}`)
      .then(res => res.json())
      .then(result => setUser(result));
    return;
  }

  switch (action) {
    case 'reset':
      resetPageState();
      break;
    case 'export':
      exportTableData();
      break;
    // 其余按钮的逻辑可以在这里按需新增分支
  }
}

方案优势 #

• 仅需绑定1个事件监听器，内存开销远低于逐个绑定事件的实现，性能更好
• 后续新增同组按钮时，只要放在对应父容器下、配置好对应的data属性，不需要额外绑定事件，扩展方便
• 所有按钮的交互逻辑集中维护，修改公共逻辑时只需要调整这一处函数即可
• 完全适配React的合成事件系统，不存在兼容问题，也不需要引入额外的DOM操作库

注意事项 #

• 不要直接用e.target做元素判断，当按钮内部嵌套了span、图标等子元素时，点击触发的e.target会是子元素而非按钮本身，用closest方法匹配可以避免这个问题
• 按钮的差异化参数统一存在data-*属性上即可，不要依赖全局变量传参，避免状态混乱

内容的提问来源于stack exchange，提问作者user19171748