ReactJS。 如何在创建的侦听器中删除事件侦听器？

Question

onDragEnd事件监听touchend或mouseup 。 如果onDragEnd function 被触发然后touchmove和mousemove应该被删除，但它不起作用。 如何在touchend或mouseup后正确删除mousemove或touchmove事件？

资源：

const onDragEnd = () => {
    window.removeEventListener('touchmove', handleTouchMove);
    window.removeEventListener('mousemove', handleMouseMove);
    setIsDragging(false);
    setTranslate(0);
  };

  const handleMouseDown = event => {
    onDragStart(event.clientX);
    window.addEventListener('mousemove', handleMouseMove);
  };

  const handleTouchStart = event => {
    const touch = event.targetTouches[0];
    onDragStart(touch.clientX);
    window.addEventListener('touchmove', handleTouchMove);
  };

  useEffect(() => {
    window.addEventListener('touchend', onDragEnd);
    window.addEventListener('mouseup', onDragEnd);
    return () => {
      window.removeEventListener('touchend', onDragEnd);
      window.removeEventListener('mouseup', onDragEnd);
    };
  }, []);

Answer 1

您需要将 function 的相同引用传递给您用于addEventListener的removeEventListener 。

现在，由于您的函数在函数组件中并且可以设置 state，因此会创建函数的新引用，因此不会正确删除事件。

您可以使用 useCallback 来记忆 function 参考，这将有助于删除事件

const handleTouchMove = useCallback(() => {
  }, []);
  const handleMouseMove = useCallback(() => {

  }, [])
  const onDragEnd = useCallback(() => {
    window.removeEventListener('touchmove', handleTouchMove);
    window.removeEventListener('mousemove', handleMouseMove);
    setIsDragging(false);
    setTranslate(0);
  }, []);

  const handleMouseDown = useCallback(event => {
    onDragStart(event.clientX);
    window.addEventListener('mousemove', handleMouseMove);
  }, []);

  const handleTouchStart = useCallback(event => {
    const touch = event.targetTouches[0];
    onDragStart(touch.clientX);
    window.addEventListener('touchmove', handleTouchMove);
  }, []);

  useEffect(() => {
    window.addEventListener('touchend', onDragEnd);
    window.addEventListener('mouseup', onDragEnd);
    return () => {
      window.removeEventListener('touchend', onDragEnd);
      window.removeEventListener('mouseup', onDragEnd);
    };
  }, []);