单击按钮子元素时 event.target 错误

Question

我有以下元素代表调查中的按钮：

<button name={id} value={value} onclick={handleChoiceClick} className="choice__button">
   <img src={image} className="choice__button-image"/>
   <span className="choice__button-title">Button title</span>
</button>

该handleChoiceClick函数触发handleChange函数并通过按钮的名称和值存储一些数据：

const handleChoiceClick = (e) => {
   handleChange(e.target.name, e.target.value);
};

这工作正常，但是当我单击按钮（图像或跨度）内的子元素之一时，该handleChoiceClick函数会获取另一个 event.target 作为参数，并且名称和值未定义。

解决这个问题的最佳方法是什么？检查event.target内部handleChoiceClick还是有更简单的方法吗？

Answer 1

如果您想要挂钩事件的元素，请使用event.currentTarget而不是event.target。就您而言，这始终是要素button。