React中如何获取按钮值并传递到其他组件？点击取值异常

问题出在事件冒泡机制上——当点击按钮内的图标时，e.target指向的是<FaUserSecret>图标元素，而非外层绑定点击事件的<button>，自然取不到按钮上的value属性。以下是三种可行的解决方案：

方案1：使用e.currentTarget替代e.target #

currentTarget始终指向绑定事件处理函数的元素（也就是这里的按钮），不受事件冒泡影响，能稳定拿到按钮的value：

<button value={'admin'} onClick={(e) => handleClick(e.currentTarget.value)}>
  <FaUserSecret className="text-lg" /> {/* 注意：这里是className，不是classname */}
</button>

方案2：直接传递目标值到处理函数 #

不用依赖事件对象，直接把需要的值传给handleClick，逻辑更直观，也避免了事件目标的问题：

<button value={'admin'} onClick={() => handleClick('admin')}>
  <FaUserSecret className="text-lg" />
</button>

如果是循环生成的按钮数组，直接用循环项的value即可：

{/* 假设buttons是你的按钮配置数组 */}
{buttons.map(btn => (
  <button key={btn.value} value={btn.value} onClick={() => handleClick(btn.value)}>
    {btn.icon} {/* 比如这里的btn.icon就是FaUserSecret组件 */}
  </button>
))}

方案3：让图标不接收点击事件 #

给图标添加pointer-events: none样式，点击图标时事件会直接穿透到外层按钮，此时e.target就会是按钮：

<button value={'admin'} onClick={(e) => handleClick(e.target.value)}>
  <FaUserSecret className="text-lg" style={{ pointerEvents: 'none' }} />
</button>

也可以通过CSS类全局设置：

.icon-btn .text-lg {
  pointer-events: none;
}

然后给按钮加上对应类名：

<button className="icon-btn" value={'admin'} onClick={(e) => handleClick(e.target.value)}>
  <FaUserSecret className="text-lg" />
</button>

内容的提问来源于stack exchange，提问作者Yogesh Kadu