如何通过React的onMouseEnter事件获取div元素的id？

问题原因 #

你当前代码里，把event和字符串拼接后调用Object.keys()，会触发事件对象的toString()方法，导致输出的是React合成事件的字符串形式，自然看不到target/currentTarget这些关键属性。

正确解决方案 #

要获取绑定事件的div的id，直接使用event.currentTarget.id（推荐）或者event.target.id，两者的区别：

• currentTarget：始终指向绑定事件的元素（也就是你写onMouseEnter的这个div），无论鼠标悬停在div内部哪个子元素上，都能拿到正确的graph-1。
• target：指向实际触发事件的元素，如果鼠标悬停在内部的h3或MarksDisplayTable上，target会变成这些子元素，可能拿不到div的id。

修改后的handleHover函数：

const handleHover = (event) => {
  // 获取绑定事件的div的id
  const divId = event.currentTarget.id;
  console.log("当前div的id:", divId); // 输出graph-1

  // 若要查看完整事件对象，直接console.dir(event)即可，不要和字符串拼接
  console.dir(event);
};

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