ReactJS DIV onClick行为[重复]答案

【问题标题】：ReactJS DIV onClick behavior [duplicate]ReactJS DIV onClick行为[重复]
【发布时间】：2021-01-15 13:33:02
【问题描述】：

我有一个 <div> 和一个 onClick 处理程序，其中包含一个很棒的图标。单击 div 中的任意位置会返回正确的元素 ID。单击 fontawesome 图标不会返回任何 ID。在控制台中，单击图标显示被单击的元素是 svg 本身，而不是 <div>。如何解决这个为图标和 div 编写代码的短板？

CodeSandBox Example

【问题讨论】：

这能回答你的问题吗？ Click through div to underlying elements。即在 svg 中使用 pointer-events: none
正如 Rafael 所说，您必须添加此 <FontAwesomeIcon style={{pointerEvents: 'none'}} 并且它会起作用

标签： css reactjs

【解决方案1】：

使用 e.currentTarget.id 而不是 e.target.id

onClick={(e) => alert(e.currentTarget.id)}

【讨论】：