React中点击按钮内图标无法获取按钮value值的问题与解决

当你点击按钮内的图标时，event.target指向的是<i>标签元素，而这个图标标签并没有value属性，所以获取不到值；点击按钮空白区域时，event.target直接指向带value属性的<button>标签，因此能正常拿到ID。

有三种简单的处理方式，任选其一即可：

方法1：使用event.currentTarget #

currentTarget始终指向绑定了点击事件的元素（也就是你的按钮），和实际点击的子元素无关。修改处理函数：

const toggle = (event) => {
  const id = event.currentTarget.value;
  console.log(id);
};

方法2：通过closest()找到父按钮 #

从点击的元素向上查找最近的<button>元素，再获取它的value：

const toggle = (event) => {
  const button = event.target.closest('button');
  // 可选链避免找不到按钮时报错
  const id = button?.value;
  console.log(id);
};

方法3：直接传递ID到处理函数 #

在绑定点击事件时，直接把el._id作为参数传给toggle函数，不用依赖事件对象：

<button
  className="toggle__btn"
  value={el._id}
  onClick={() => toggle(el._id)}
>
  <i className="fa-solid fa-circle-info fs-4"></i>
</button>

// 对应的处理函数
const toggle = (id) => {
  console.log(id);
};

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