如何在 React 中正确获取嵌套图标按钮的 value 值

当按钮内包含图标等子元素时，直接用 event.target.value 会因事件实际触发节点（如 标签）无 value 属性而返回 undefined；应改用 event.currenttarget.value 确保始终获取绑定事件的按钮元素的值。

在 React 中，event.target 指向 事件最初发生的 DOM 元素 （即你点击的具体节点），而 event.currentTarget 指向 当前事件监听器所绑定的元素（即你声明 onClick 的那个 ）。当你点击图标 时，event.target 是 元素（它没有 value 属性），因此 event.target.value 为 undefined；但 event.currentTarget 始终是 ，其 value 属性正是你设置的 el._id。

✅ 正确写法如下：

const toggle = (event) => {const id = event.currentTarget.value; // ✅ 始终指向 button 元素   console.log(id); // 输出预期的 el._id };  // JSX 中保持不变     

⚠️ 注意事项：

• 不要依赖 event.target.value 处理嵌套内容的按钮值，尤其在含图标、文字、SVG 等子节点时；
• currentTarget 在事件委托或合成事件中同样可靠，React 的 onClick 合成事件已确保 currentTarget 正确指向绑定元素；
• 若需兼容更复杂交互（如阻止图标默认行为），可额外调用 event.stopPropagation()，但本例中无需。

? 扩展建议：对于现代 React 开发，推荐优先使用 data-* 属性 + useCallback 避免闭包问题，例如：

 toggle(e.currentTarget.dataset.id)} >    

这种方式语义更清晰，且不依赖 value 属性（对非表单元素更通用）。