在 React 中，当按钮内嵌图标等子元素时，直接使用 event.target.value 会因事件实际触发目标（icon）无 value 属性而返回 undefined；应改用 event.currentTarget.value 确保始终获取绑定事件的按钮元素的 value。
在 react 中，当按钮内嵌图标等子元素时，直接使用 `event.target.value` 会因事件实际触发目标（icon）无 value 属性而返回 undefined；应改用 `event.currenttarget.value` 确保始终获取绑定事件的按钮元素的 value。
在 React 开发中，一个常见但容易被忽视的 DOM 事件细节是 event.target 与 event.currentTarget 的区别。当你为按钮（<button>）绑定 onClick 事件，但点击其内部的 <i> 图标时，event.target 指向的是被点击的实际元素——即 <i> 标签，而它本身没有 value 属性，因此 event.target.value 为 undefined；而 event.currentTarget 始终指向事件监听器所绑定的元素，也就是外层的 <button>，其 value 属性（如 value={el._id}）才真正存储了你需要的 ID。
✅ 正确写法如下：
<button
className="toggle__btn"
value={el._id}
onClick={toggle}
>
<i className="fa-solid fa-circle-info fs-4"></i>
</button>const toggle = (event) => {
// ✅ 正确：获取绑定事件的 button 元素的 value
const id = event.currentTarget.value;
console.log(id); // 输出 el._id，无论点击图标还是按钮空白区域
};⚠️ 注意事项：
- 不要依赖 event.target.value 获取父级按钮的值，除非你明确确保用户只点击按钮的文本/空白区域且该区域无子节点；
- 若需兼容更复杂交互（如阻止图标默认行为、添加过渡效果），可对 <i> 单独加 onClick={(e) => e.stopPropagation()}，但本例中无需——因为 currentTarget 已天然解决冒泡问题；
- currentTarget 在事件委托或动态绑定场景下同样可靠，是 React 事件处理中的推荐实践。
? 总结：target 是“谁被点”，currentTarget 是“谁在听”。在组件化开发中，始终优先使用 event.currentTarget 访问绑定元素的属性，可显著提升事件逻辑的健壮性与可维护性。
