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);
    };
  }, []);