React中Button的onClick事件target随点击位置变化的问题

我懂你的困扰——当点击按钮本身时，事件处理函数里的target是<button>元素，但点内部的Font Awesome图标时，target就变成了<i>标签，这会导致你没法稳定获取按钮的value这类属性对吧？

这里有个简单又靠谱的解决方案：

使用currentTarget代替target #

React事件对象里的currentTarget属性，始终指向绑定了该事件处理函数的元素（也就是你的<button>），不管事件是从哪个子元素冒泡上来的。

修改你的事件处理函数就行：

// 你的按钮组件
<button onClick={changeViewType} value="boxes">
  <i className="fa fa-th" style={{color: '#26d6ff'}}/>
</button>
<button onClick={changeViewType} value="table">
  <i className="fa fa-list-ul"/>
</button>

// 事件处理函数
const changeViewType = (e) => {
  // 用currentTarget获取绑定事件的按钮元素
  const selectedValue = e.currentTarget.value;
  // 接下来就可以用这个value做你需要的操作了，比如切换视图类型
  console.log('切换到视图类型：', selectedValue);
}

原理说明 #

这是因为DOM事件的冒泡机制：点击子元素<i>时，事件会从<i>向上冒泡到父元素<button>，所以target是触发事件的源头元素（可能是<i>或<button>），而currentTarget则是当前正在处理该事件的元素——也就是你绑定onClick的那个<button>，所以它的值是稳定的。

如果你不想用currentTarget，还有个备选方案：给<i>标签添加pointer-events: none的CSS样式，这样点击图标时会直接穿透到按钮元素，target就始终是<button>了，但这种方法会禁用图标本身的鼠标事件（比如hover效果），所以不如currentTarget灵活。

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