ReactJS：访问 event.target 子级的问题答案

【问题标题】：ReactJS: Issue with accessing event.target childrenReactJS：访问 event.target 子级的问题
【发布时间】：2020-07-10 22:39:55
【问题描述】：

我的 React App 中有一个组件，其中包含一个带有 onMouseEnter/Leave 处理程序的元素

<CollapseElement>
  <li onMouseEnter={e => handleEnter(e)}>
   {props.children}
  </li>
</CollapseElement>

li 通过 props 传递子元素，其中我想在 CollpaseElement 组件的 handleEnter 中访问 className 为“targetelement”的元素并将其传递给函数

const handleEnter = (e) => {
        e.preventDefault();
        console.log(e.currentTarget.innerHTML)
        function(...)
    }

虽然console.log 确实向我显示了目标所在的innerHTML，但我无法找到选择它的方法。我尝试过 querySelector('.targetelement')、最接近或 querySelectorAll 都没有成功：要么是空错误，要么例如如果函数试图获取目标元素的坐标，我最终得到的所有值都是 0

感谢您的意见

【问题讨论】：

你想达到什么目的？你不应该直接在你的反应代码中使用 dom api
@tudor.gergely 我想获取元素的大小来动态更新另一个元素的坐标，被调用的函数是通过上下文+钩子提供的
您是否调查过React refs 在这种情况下是否对您有用？
@ThomasUpton 它在我的列表中是下一个，但由于官方文档提到它们应该小心使用，而且不要太频繁，而且我到目前为止从未使用过它们，所以我更喜欢先看看更有经验的用户在深入研究可能不太推荐的方法之前会建议。虽然在这里等待答案，但我将继续并行调查它
参考没有解决问题。另外因为目标元素取决于 mouseEnter 事件，所以如果我正确理解了 refs，我需要为每个不同的可能目标元素添加一个 ref

标签： javascript reactjs events

【解决方案1】：

解决了。问题在于理解 React/DOM 元素的同步和渲染。通过在父元素中使用 useEffect 并通过上下文发送正确的事件，我可以使用我需要的类来定位子元素

【讨论】：