Javascript 在react应用程序中删除事件侦听器时出现问题

以下是我在react应用程序中的代码：

useEffect(() => {
    handleCheckboxActivation();
}, [xboxActivated]);

function handleCheckboxActivation() {
  if (xboxActivated) {
    const checkboxes = document.querySelectorAll(".MuiCheckbox-root");
    checkboxes.forEach((checkbox) => {
      checkbox.addEventListener("mouseover", handleMouseoverCheckbox);
    });
  } else {
      const checkboxes = document.querySelectorAll(".MuiCheckbox-root");
      checkboxes.forEach((checkbox) => {
        checkbox.removeEventListener("mouseover", handleMouseoverCheckbox);
      });
  }
}

xboxActivated

处于状态，如果

true

则我想将事件侦听器添加到所有

材质ui

复选框中。如果是

false

我想删除所有事件侦听器。添加它们是可行的，但它们似乎无法删除。我尝试将

handleMouseoverCheckbox

分配给变量，并在事件侦听器函数调用中添加

true

，以使事件侦听器更易于区分。因此，我的第一个问题是如何让removeEventListener实际删除它们（我在网上搜索了很多），然后更一般地说，是否有一种特定于react的方法来处理元素组上的事件侦听器，或者使用普通javascript是解决此问题的唯一方法。我还没有找到一个使用

useRef

来解决这个问题的好例子

解决方案： 作为将来的参考，解决方案实际上是使用

useCallback

包装

handleMouseOverCheckbox

，下面是该函数的外观->

const handleMouseoverCheckbox = useCallback((event) => {
    ...do stuff
}, []);

---

可能您正在处理函数handleMouseoverCheckbox在渲染之间发生变化。所以在下一个组件渲染时，它指向它的不同（新版本）。因为removeEventListener必须获得相同的函数值（指针）才能删除它，所以它不起作用。使用useCallback定义handleMouseoverCheckbox，它应该开始工作。如何设置Xbox激活？