删除react 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

您应该使用react中的useEffect钩子，并将addEventListener和removeEventListener代码作为第一个参数放入useEffect中。useEffect将第二个参数作为依赖项，它意味着useEffect应该调用什么值更改。在您的情况下，您希望调用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';

Answer 2

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

---

使用mousemove上的键可解决此问题。我仍然不知道为什么removeEventListener在上述情况下不起作用。