按钮onClick目标正在改变

Question

我有一个带有fa图标的按钮，我附加了一个onClick事件（React）

如果我点击按钮，处理程序的目标就是按钮本身。如果我点击按钮内的fa图标，则处理程序的目标是i标记，即fa图标。

示例代码：

<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 = selectedView => {
  console.log(selectedView.target.value)
}

处理此问题的最佳方法是什么？

Answer 1

检查目标元素是否为I。如果是，请带父母，如果没有继续服用原始目标。

const changeViewType = selectedView => {
    target = selectedView.target.tagName == 'I'? selectedView.target.parentElement : selectedView.target;
    console.log(target.value)
}

Answer 2

您应该使用event.currentTarget代替event.target。

来自MDN文档：

  

它（event.currentTarget）总是引用事件处理程序附加到的元素，而event.target则标识事件发生的元素。

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget