React点击图标获取正确value方法

本文深入剖析了 React 中按钮点击事件里 `event.target` 与 `event.currentTarget` 的本质区别，直击开发中一个高频痛点：当按钮内嵌图标等子元素时，用 `event.target.value` 总是返回 `undefined`，导致业务逻辑中断；而只需将 `target` 替换为 `currentTarget`，就能稳定、可靠地获取按钮自身绑定的 `value` 或其他属性，无需繁琐的 DOM 查找或类型判断——这不仅是修复 bug 的捷径，更是写出健壮、可维护 React 事件处理代码的关键实践。

本文详解 React 事件中 event.target 与 event.currentTarget 的关键区别，通过替换为 currentTarget 即可稳定获取按钮绑定的 value，彻底解决点击子元素（如图标）时值丢失的问题。

本文详解 React 事件中 `event.target` 与 `event.currentTarget` 的关键区别，通过替换为 `currentTarget` 即可稳定获取按钮绑定的 `value`，彻底解决点击子元素（如图标）时值丢失的问题。

在 React 中处理按钮点击事件时，若按钮内嵌套了子元素（例如 Font Awesome 图标 ），直接使用 event.target.value 获取 button 的 value 属性往往失败——这是因为 event.target 指向实际被点击的最深 DOM 节点（即 标签），而 元素本身没有 value 属性，导致返回 undefined。

而 event.currentTarget 始终指向当前事件监听器所绑定的元素，也就是你调用 onClick 的那个 。因此，它能稳定访问该按钮上定义的 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，提升类型安全性；
• 不要依赖 event.target 向上查找父级（如 event.target.closest('button')），既冗余又脆弱；
• 若需同时获取点击位置或判断是否点中图标，可额外检查 event.target === event.currentTarget（即是否直接点在按钮空白处）或 event.target.tagName === 'I'；
• 此原理适用于所有事件委托/冒泡场景（如 div 内含多个操作图标），currentTarget 是 React 事件处理中的“黄金标准”。

? 总结：target 是“谁被点”，currentTarget 是“谁在听”——在组件内直接绑定事件时，始终优先使用 currentTarget 访问绑定元素的属性，确保逻辑健壮、语义清晰、不易出错。

今天关于《React点击图标获取正确value方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问