React获取按钮value值的正确方法

在 React 中处理按钮点击事件时，若按钮内嵌图标等子元素，直接使用 `event.target.value` 常因实际点击目标（如图标）无 value 属性而返回 undefined；而 `event.currentTarget.value` 始终指向绑定事件的按钮本身，能稳定获取预设的 value 值（如 ID），避免逻辑中断。这一看似细微的差异实则是保障事件处理健壮性的关键——它不依赖用户点击位置、兼容复杂 DOM 结构、天然支持事件冒泡与动态绑定，是 React 开发中值得牢记的底层实践智慧。

在 React 中，当按钮内嵌图标等子元素时，直接使用 `event.target.value` 会因事件实际触发目标（icon）无 value 属性而返回 undefined；应改用 `event.currentTarget.value` 确保始终获取绑定事件的按钮元素的 value。

在 React 开发中，一个常见但容易被忽视的 DOM 事件细节是 event.target 与 event.currentTarget 的区别。当你为按钮（）绑定 onClick 事件，但点击其内部的 图标时，event.target 指向的是被点击的实际元素——即 标签，而它本身没有 value 属性，因此 event.target.value 为 undefined；而 event.currentTarget 始终指向事件监听器所绑定的元素，也就是外层的 ，其 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 获取父级按钮的值，除非你明确确保用户只点击按钮的文本/空白区域且该区域无子节点；
• 若需兼容更复杂交互（如阻止图标默认行为、添加过渡效果），可对 单独加 onClick={(e) => e.stopPropagation()}，但本例中无需——因为 currentTarget 已天然解决冒泡问题；
• currentTarget 在事件委托或动态绑定场景下同样可靠，是 React 事件处理中的推荐实践。

? 总结：target 是“谁被点”，currentTarget 是“谁在听”。在组件化开发中，始终优先使用 event.currentTarget 访问绑定元素的属性，可显著提升事件逻辑的健壮性与可维护性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

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

继续访问