React.js 上的 addEventListener

Question

我正在嘗試在 React 應用程序上運行 addEventListener 函數，但大多數時候它沒有按預期運行。

不確定我是否需要重新制作它，或者它是否缺少某些東西。 如果是這樣，你們能幫我嗎？

const light = document.querySelector('.light');
const grid  = document.querySelector('.grid-container, .navbar, #hex-grid');
  if (light){
      grid.addEventListener('mousemove', function (e) {
      light.style.left = `${e.clientX}px`;
      light.style.top = `${e.clientY}px`;
    });
  };

Answer 1

代碼中的行const grid = document.querySelector('.grid-container, .navbar, #hex-grid'); 是錯誤的。如果您需要訪問 jquery 中的許多元素，則必須 querySelectorAll(); 功能。 執行以下代碼，

let grids= document.querySelectorAll("'.grid-container, .navbar, #hex-grid');

然后，您可以通過遍歷網格變量中的節點數組來使用 JavaScript 映射函數添加事件偵聽器。

grids.map(grid=>(

  grid.addEventListener('mousemove', function (e) {
      light.style.left = `${e.clientX}px`;
      light.style.top = `${e.clientY}px`;
    });

));

我沒有添加const light = document.querySelector('.light'); 因為您提到了邏輯以及使用輕類節點還需要做什么。 我只指您代碼中的錯誤。

Answer 2

我更改為 querySelector 整個應用程序 div（'.App'）。 似乎工作正常。