删除反应 js 中的事件侦听器问题

Question

const ControlPanel = ({ mainSectionRef }) => {
    const [canMove, setCanMove] = useState(false)
    const classes = useStyles();
    const toolbarRef = useRef();

    const onMouseMove = function (e) {
        const { x, y } = getMouseCoordinatesOnCanvas(e, mainSectionRef.current);
        toolbarRef.current.style.left = x +'px';
        toolbarRef.current.style.top = y + 'px';
    }

    const setCan = () => {
        setCanMove(!canMove)
    }

    if (mainSectionRef.current) {
        //issue is here!!!!
        mainSectionRef.current.removeEventListener('mousemove', onMouseMove, true)
        if (canMove) {
            mainSectionRef.current.addEventListener('mousemove', onMouseMove, true)
        }
    }

    return (
        <Toolbar ref={toolbarRef}>
           <RadioButtonUncheckedIcon />
           <CropSquareIcon />
           <ArrowRightAltIcon />
           <CloseIcon />
           <DragIndicatorIcon style={{ backgroundColor: canMove ? "red" : "inherit" }} onClick={setCan}/>
        </Toolbar >
    );
}
export default ControlPanel;

每当组件中发生状态更改时，我都会尝试删除事件侦听器。 mainSectionref 是父 div，控制面板是子组件。我正在尝试在按钮的mainSectiononClick 中移动控制面板。该事件确实被添加但在状态更改时，它似乎并没有删除事件侦听器。我能知道出了什么问题吗？

Answer 1

useEffect(() => {
    function onMouseMove(e) {
        //Some code
    }
    if (mainSectionRef.current) {
        **mainSectionRef.current.onmousemove = null**;
        if (canMove) {
            mainSectionRef.current.onmousemove = e => onMouseMove(e);
        }
    }
}, [canMove])

---

问题已通过使用 onmousemove 键解决。我仍然不知道为什么 removeEventListener 在上述情况下不起作用。

Answer 2

您应该使用 react 中的 useEffect 挂钩，并将您的 addEventListener 和 removeEventListener 代码作为第一个参数放入 useEffect 中。 useEffect 将第二个参数作为依赖项，这意味着 useEffect 应该调用的值更改。在您的情况下，您想在 canMove 更改时调用 useEffect。

  useEffect(() => {
   if (mainSectionRef.current) {
   mainSectionRef.current.removeEventListener('mousemove', onMouseMove, true)
     if (canMove) {
     mainSectionRef.current.addEventListener('mousemove', onMouseMove, true)
    }
   }
  }, [canMove]);

还记得：import React, { useState, useEffect } from 'react';