在 react 的 addEventListener 回调函数中调用 addEventListener

Question

我是一名学习反应的学生。 我现在制作的组件有问题。 我想做的是一个类似于下面链接的滚动式选择器。
https://codepen.io/gnauhca/pen/JrdpZZ
在这个实现过程中，在eventListener中注册和移除eventListener时出现了问题。

import { useState, useRef, useEffect } from "react";

function Scroller() {
  const array = [170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180];
  const [dragEventHistory, setDragEventHistory] = useState([]);
  const [dragEventStart, setDragEventStart] = useState(null);

  const scrollerContainer = useRef();
  const scrollerList = useRef();

  useEffect(() => {
    const moveList = (clientY) => {
      const difference = Number(dragEventStart) - Number(clientY);
      scrollerList.current.style.transform = `translate3d(0, -${difference}px, 0)`;
    };

    const onMouseMoveEventHandler = (e) => {
      console.log(e);
      e.preventDefault();
      moveList(e.clientY);
    };

    const onMouseDownEventHandler = (e) => {
      console.log(e);
      e.preventDefault();
      setDragEventStart(e.clientY);
      scrollerContainer.current.addEventListener(
        "mousemove",
        onMouseMoveEventHandler
      );
    };

    const onMouseUpEventHandler = (e) => {
      console.log(e);
      e.preventDefault();
      scrollerContainer.current.removeEventListener(
        "mousemove",
        onMouseMoveEventHandler
      );
    };

    scrollerContainer.current.addEventListener(
      "mousedown",
      onMouseDownEventHandler
    );
    scrollerContainer.current.addEventListener(
      "mouseup",
      onMouseUpEventHandler
    );

    return () => {
      scrollerContainer.current.removeEventListener(
        "mousedown",
        onMouseDownEventHandler
      );
      scrollerContainer.current.removeEventListener(
        "mouseup",
        onMouseUpEventHandler
      );
    };
  }, []);

  return (
    <div
      className="scroller-container"
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden",
        width: 200,
        height: 250,
      }}
      ref={scrollerContainer}
      // onTouchStart={onTouchStartEventHandler}
      // onTouchEnd={onTouchEndEventHandler}
    >
      <ul className="scroller-list" ref={scrollerList}>
        {array.map((item, index) => {
          return (
            <li
              key={index}
              style={{
                width: 200,
                height: 50,
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                backgroundColor: "orange",
                fontSize: 30,
              }}
            >
              {item}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default Scroller;

如果我不使用 useEffect 定义函数，根据 'dragEventStart' 状态的变化，注册为事件的回调函数无法在组件重新渲染过程中删除。
如果我在useEffect中定义函数，removeEventListener函数可以指向与addEventListener函数的回调相同的回调函数。但无法更改 dragEventStart 状态。但是，如果 dragEventStart 包含在 useEffect 的依赖项中，则与不使用 useEffect 时相同。

我怎么解决这个问题？我需要帮助！！

Answer 1

与其声明 dragEventStart 一个 React 状态变量并依赖于适当的值封闭，我建议将它转换为一个可以随意改变的 React 引用。

此外，不是不断添加/删除事件侦听器，而是在组件安装时添加一次鼠标向下|向上|移动侦听器，并在返回的useEffect钩子清理函数中删除它们。

为了让用户体验更好一点，鼠标向上和移动事件监听器应该附加到 window 对象，这样如果用户在释放时不在 scrollerContainer 元素上，拖动就不会“卡住”鼠标按钮。

例子：

function Scroller() {
  ...
  const [dragEventHistory, setDragEventHistory] = useState([]);
  const dragEventStartRef = useRef(null);

  const scrollerContainer = useRef();
  const scrollerList = useRef();

  useEffect(() => {
    const moveList = (clientY) => {
      // Only handle move if drag is started
      if (dragEventStartRef.current) {
        const difference = Number(dragEventStartRef.current) - Number(clientY);
        scrollerList.current.style.transform = `translate3d(0, -${difference}px, 0)`;
      }
    };

    const onMouseMoveEventHandler = (e) => {
      e.preventDefault();
      moveList(e.clientY);
    };

    const onMouseDownEventHandler = (e) => {
      e.preventDefault();
      dragEventStartRef.current = e.clientY;
    };

    const onMouseUpEventHandler = (e) => {
      e.preventDefault();
      dragEventStartRef.current = null;
    };

    scrollerContainer.current.addEventListener(
      "mousedown",
      onMouseDownEventHandler
    );
    window.addEventListener("mouseup", onMouseUpEventHandler);
    window.addEventListener("mousemove", onMouseMoveEventHandler);

    return () => {
      scrollerContainer.current.removeEventListener(
        "mousedown",
        onMouseDownEventHandler
      );
      window.removeEventListener("mouseup", onMouseUpEventHandler);
      window.removeEventListener("mousemove", onMouseMoveEventHandler);
    };
  }, []);

  return (
    ...
  );
}

Answer 2

尝试了一些不同的东西，这是唯一的方法......谢谢O_o