React（JavaScript）中获取data-id属性失败，求最优解决方法

方法一：用event.currentTarget替代event.target #

event.currentTarget始终指向绑定事件处理函数的元素（也就是带data-id的父div），而event.target是实际触发点击的元素（这里是子div）。修改代码如下：

<div onClick={handlePropsClick} title={'aaa'} data-id={2}>
  <div className='value-text'>Hello</div>
</div>

const handlePropsClick = (event) => {
  // 两种方式都可以获取data-id
  alert(event.currentTarget.getAttribute('data-id'));
  // 或者用更简洁的dataset API
  alert(event.currentTarget.dataset.id);
};

注意：你之前的handlePropsClick写成了返回函数的形式，其实没必要，直接接收event参数即可（如果不需要提前传参的话）。

方法二：直接传递数据给事件处理函数（React推荐方案） #

React更提倡数据驱动而非DOM操作，你可以直接把需要的data-id值作为参数传给事件处理函数，完全不用依赖DOM属性：

<div onClick={() => handlePropsClick(2)} title={'aaa'}>
  <div className='value-text'>Hello</div>
</div>

const handlePropsClick = (id) => {
  alert(id); // 直接拿到2
};

这种方式更符合React组件化的思想，不依赖DOM结构，后续DOM调整也不会影响功能，是最优解。

方法三：通过DOM查找目标父元素（不推荐） #

如果一定要基于DOM结构查找，可以用closest方法找到最近的带data-id的元素，但这种方式依赖DOM层级，结构变动容易失效：

<div onClick={handlePropsClick} title={'aaa'} data-id={2}>
  <div className='value-text'>Hello</div>
</div>

const handlePropsClick = (event) => {
  const targetElement = event.target.closest('[data-id]');
  if (targetElement) {
    alert(targetElement.dataset.id);
  }
};

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