时间戳

首页 > 解决方案 > 按钮的 onclick 记录 i 标签而不是按钮本身

javascript - 按钮的 onclick 记录 i 标签而不是按钮本身

问题描述

我有一个按钮，我想在单击它时捕获它的“id”。

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

当我在我的 handleClick 函数中记录事件console.log(event.target.id);时，如果我单击按钮的中间，它会返回 i 标签的“id”（它只是一个空字符串）。如果我单击按钮的侧面，那么我的 handleClick 函数将按预期工作。

这是按钮的外观以供参考 在此处输入图像描述

我应该如何解决这个问题？我想我可以将相同的“id”属性添加到 i 标签，但想知道是否有更好的解决方法。

标签： javascripthtmlreactjs

解决方案

您可以改用currentTarget：

console.log(event.currentTarget.id);

这将返回currentTarget您附加了onClick函数的那个​​，而不是target触发事件的那个。

推荐阅读