React не может вызвать window.onmouseup

Question

У меня есть компонент-слайдер, который должен перестать двигаться после того, как мышь поднята. Я прошел через форум, и мой код очень похож на тот, который здесь

const Slider = ({ mainColour }) => {
  const [cursorPos, setCursorPos] = React.useState(0);
  const [isSliding, setSliding] = React.useState(false);
  const ref = React.useRef();

  const drag = e => {
    console.log("dragging");
    setCursorPos(e.pageY);
  };

  const startDrag = e => {
    setSliding(true);
    window.addEventListener("mousemove", drag);
    window.addEventListener("mouseup", function() {
      ref.current.onmousedown = null;
      ref.current.onmouseup = null;
      ref.current.onmousemove = null;
      setSliding(false);
      window.onmouseup = null;
    });
  };

  return (
    <div
      className={`cursor ${isSliding ? "active" : ""}`}
      ref={ref}
      style={{
        top: `${cursorPos}px`,
        backgroundColor: `${mainColour}`
      }}
      onMouseDown={event => startDrag(event)}
    ></div>
  );
};

export default Slider;

Однако, когда startDrag срабатывает, window.onmouseup Слушатель не работает и не останавливает слайдер. Будут благодарны за любые идеи, почему это не работает.

Answer 1

https://codesandbox.io/s/lucid-sunset-8e78r

Реакция может вызвать mouseup, вам просто нужно использовать window.removeEventListener для drag(), когда вы mouseup. Вот почему вы видите dragging в консоли после mouseup, вы просто забыли отписаться от события:)

window.onmouseup = null; не совпадает с window.removeEventListener("mousemove").

const Slider = ({ mainColour }) => {
  const [cursorPos, setCursorPos] = React.useState(0);
  const [isSliding, setSliding] = React.useState(false);
  const ref = React.useRef();

  const drag = e => {
    console.log("dragging");
    setCursorPos(e.pageY);
  };

  useEffect(() => {
    if (isSliding) {
      window.addEventListener("mousemove", drag);
    }
  }, [isSliding]);

  useEffect(() => {
    window.addEventListener("mouseup", function() {
      window.removeEventListener("mousemove", drag);
      setSliding(false);
    });
  });

  const startDrag = () => setSliding(true);

  return (
    <div
      className={`cursor ${isSliding ? "active" : ""}`}
      ref={ref}
      style={{
        top: `${cursorPos}px`,
        backgroundColor: `${mainColour}`
      }}
      onMouseDown={event => startDrag(event)}
    />
  );
};