如何在 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並重試。