React：addEventListener（）在useEffect鈎子內部調用時返回錯誤

Question

如何在useEffect()鈎子中添加事件監聽器？

我正在使用useRef()來定位nav元素，然后選擇所有鏈接后代。 我正在嘗試向這些鏈接元素添加一個事件監聽器，但我收到一個錯誤。

這是我的組件代碼的一部分：

let navRef = useRef();

useEffect(() => {
    let links = sideDrawerRef.current.querySelectorAll('ul li a');

    links.addEventListener('click', () => {
      console.log('hay');
    });
  });

<nav ref={navRef} >
  <ul>
    <li><a href="#">Link A</a></li>
    <li><a href="#">Link B</a></li>
  </ul>
</nav>

我收到以下錯誤：

links.addEventListener不是一個函數

Answer 1

而不是添加事件處理程序，請考慮通過onClick prop將事件綁定委派給React。

這樣做將簡化您的組件實現：

let navRef = useRef();

const onClickLink = () => {
    console.log('hay');
}

<nav ref={navRef} >
  <ul>
    <li><a href="#" onClick={onClickLink}>Link A</a></li>
    <li><a href="#" onClick={onClickLink}>Link B</a></li>
  </ul>
</nav>

另外，在當前代碼上添加一些注釋來解釋一些問題;

querySelectorAll()方法返回NodeList 。 要將click事件處理程序添加到所有選定節點，您必須迭代每個節點並一次添加一個事件偵聽器：

let links = someAnscestor.querySelectorAll('ul li a');
for(const link of links) {
    /* Add click to currently iterated link node in NodeList result */
    link.addEventListener('click', () => {
      console.log('hay');
    });    
}

此外，這里使用useEffect()的方式將導致每次組件渲染時運行效果。 添加[]作為useEffect()的第二個參數將導致效果回調在啟動時運行一次，這在這里更適合：

useEffect(() => {
    console.log("I only run when the component first mounts");

    return () => {
        console.log("I run when the component is unmounted");
    }    
}, []); // <-- [] causes effect to run once