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

Question

onDragEnd event listens for touchend or mouseup . If onDragEnd function is triggered then touchmove and mousemove should be removed, but it does not work. How to correctly remove mousemove or touchmove events after touchend or mouseup is called?

Source:

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

You need to pass the same reference of the function to removeEventListener that you used to addEventListener .

Now since your functions are within functional component and may set state, new reference of the functions are created and hence events are not properly removed.

You can make use of useCallback to memoize the function references which will help in removing the events

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