javascript - React 无法触发 window.onmouseup

Question

我有一个 slider 组件，它应该在鼠标抬起后停止移动。我浏览过论坛，我的代码与 here 非常相似

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 监听器似乎不起作用，并且不会停止 slider 。对于为什么它不起作用的任何见解，我们将不胜感激。

Answer 1

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

React 可以触发 mouseup，只需在 mouseup 时使用 window.removeEventListener 进行 drag() >。这就是为什么您在 mouseup 之后在控制台中看到 dragging 的原因，您只是忘记取消订阅该事件:)

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)}
    />
  );
};