在 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 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 获取父级按钮的值，除非你明确确保用户只点击按钮的文本/空白区域且该区域无子节点；
- 若需兼容更复杂交互（如阻止图标默认行为、添加过渡效果），可对 单独加 onClick={(e) => e.stopPropagation()}，但本例中无需——因为 currentTarget 已天然解决冒泡问题；
- currentTarget 在事件委托或动态绑定场景下同样可靠，是 React 事件处理中的推荐实践。
? 总结：target 是“谁被点”，currentTarget 是“谁在听”。在组件化开发中，始终优先使用 event.currentTarget 访问绑定元素的属性，可显著提升事件逻辑的健壮性与可维护性。