如何在 useEffect 中为 html 元素添加事件监听器？

Question

由于某些原因，我必须在useEffect挂钩中为 html 元素添加一个事件侦听器。 该元素来自名为Comp的组件。 所以我写了这个：

const Comp = () => {
  return (
    <div className="ele"></div>
    // something else
  )
}

const App = () => { 
  useEffect(() => {
    const ele = document.querySelector(`.ele`)
    const handleClick = () => {}
    ele.addEventListener('click', handleClick)
    return () => ele.removeEventListener('click', handleClick)
  }, [])
  return  <Comp/> 
}

我不能直接在Comp中为ele添加事件监听器，因为Comp是第三个库组件。 所以唯一的办法就是查询ele然后在useEffect中添加事件监听器。

但是这段代码不起作用。 在 devtools 中使用window.getEventListener(ele)时，它返回了一个没有click属性的 null object。 此外， click事件不起作用。 我发现下面的代码可以工作：

const App => { 
  const divRef = useRef(null)
  useEffect(() => {
    const handleClick = () => {}
    const ele = divRef.current.querySelector(`.ele`)
    ele.addEventListener('click', handleClick)
    return () => ele.removeEventListener('click', handleClick)
  }, [])
  return (
     <div ref={divRef}> <Comp/></div>
  )
}

那么解决这个问题的正确方法是什么？ 为什么第一种方式失败而第二种方式成功了？

Answer 1

完全使用您共享的代码（第一个片段）它工作得很好，监听器被启动。 不要使用window.getEventListener(ele)来测试您的代码，只需添加一些占位符console.log并重试。