点击Button内部i标签时event.target获取不到Button自身id如何解决

问题根因 #

event.target 指向实际触发点击事件的最内层DOM节点：点击图标区域时target为无id的<i>标签，点击按钮边缘时target为带id的<button>标签，因此出现id返回空的情况。

方案1：使用event.currentTarget获取绑定事件的元素（最优先推荐） #

事件对象的currentTarget属性永远指向绑定了当前点击事件处理函数的DOM节点，无论实际点击的是按钮内部的哪个子元素，都能准确拿到按钮的属性。
仅需修改handleClick回调内的取值逻辑即可：

console.log(event.currentTarget.id);

该方案无需修改组件结构，无冗余代码，是最优选择。

方案2：给内部图标禁用鼠标事件响应 #

给<i>标签添加CSS属性pointer-events: none，让图标完全不响应任何鼠标交互事件，此时点击图标区域时，事件会直接穿透到父级按钮元素，event.target就会变成按钮本身：

<button id={props.id} 
   onClick={props.handleClick} 
   className="btn btn-circle" >
   <i class="fas fa-angle-down" style={{pointerEvents: 'none'}}></i>
</button>

如果按钮内部有多个子元素，可统一给按钮的所有直接子元素设置该样式，避免重复配置。

不建议使用给i标签加相同id的方案 #

该方案会产生冗余代码，后续如果按钮内部新增其他子元素，还需要给所有子元素都加id属性，维护成本高，同时不符合HTML id属性全局唯一的规范。

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