本文详解 React 事件中 event.target 与 event.currentTarget 的关键区别，通过替换为 currentTarget 即可稳定获取按钮绑定的 value，彻底解决点击子元素（如图标）时值丢失的问题。
本文详解 react 事件中 `event.target` 与 `event.currenttarget` 的关键区别，通过替换为 `currenttarget` 即可稳定获取按钮绑定的 `value`，彻底解决点击子元素（如图标）时值丢失的问题。
在 React 中处理按钮点击事件时，若按钮内嵌套了子元素（例如 Font Awesome 图标 <i>），直接使用 event.target.value 获取 button 的 value 属性往往失败——这是因为 event.target 指向实际被点击的最深 DOM 节点（即 <i> 标签），而 <i> 元素本身没有 value 属性，导致返回 undefined。
而 event.currentTarget 始终指向当前事件监听器所绑定的元素，也就是你调用 onClick 的那个 <button>。因此，它能稳定访问该按钮上定义的 value、dataset 或其他属性。
✅ 正确写法如下：
<button
className="toggle__btn"
value={el._id}
onClick={toggle}
>
<i className="fa-solid fa-circle-info fs-4"></i>
</button>const toggle = (event: React.MouseEvent<HTMLButtonElement>) => {
// ✅ 使用 currentTarget 确保获取 button 元素本身
const id = event.currentTarget.value;
console.log('Clicked item ID:', id); // 正确输出 el._id
};⚠️ 注意事项：
- 类型提示建议使用 React.MouseEvent<HTMLButtonElement>，提升类型安全性；
- 不要依赖 event.target 向上查找父级（如 event.target.closest('button')），既冗余又脆弱；
- 若需同时获取点击位置或判断是否点中图标，可额外检查 event.target === event.currentTarget（即是否直接点在按钮空白处）或 event.target.tagName === 'I'；
- 此原理适用于所有事件委托/冒泡场景（如 div 内含多个操作图标），currentTarget 是 React 事件处理中的“黄金标准”。
? 总结：target 是“谁被点”，currentTarget 是“谁在听”——在组件内直接绑定事件时，始终优先使用 currentTarget 访问绑定元素的属性，确保逻辑健壮、语义清晰、不易出错。
