我如何使用 React 来收听文档正文

Answer 1

在 React 中，你需要使用

state

来代替

active

，因为重新渲染后变量的值会丢失：

  const [active, setActive] = useState(false);

现在我们有了一个状态，我们可以在鼠标按下时更改它：

  const hleMouseDown = () => {
    setActive(true);
  };

我们还可以对

useEffect

中的状态变化做出反应，以创建向文档添加和删除事件处理程序的副作用。事件处理程序将更新

active

状态，并对

active

状态做出反应：

  useEffect(() => {
    if(active) {
      const handler = () => {
        setActive(false);
      };
    
      document.body.addEventListener('mouseup', handler);

      return () => {
        document.body.removeEventListener('mouseup', handler);
      };
    }
  }, [active]);

我们还可以使用

active

状态向滚动条元素添加/删除类：

  <div
    className={`scroller-middle ${active ? 'scrolling' : ''}`}
    onMouseDown={hleMouseDown}
  >

完整代码：

  const [active, setActive] = useState(false);

  const hleMouseDown = () => {
    setActive(true);
  };
  
  useEffect(() => {
    if(active) {
      const handler = () => {
        setActive(false);
      };
    
      document.body.addEventListener('mouseup', handler);

      return () => {
        document.body.removeEventListener('mouseup', handler);
      };
    }
  }, [active]);

  return (
    <>
      <div className="middle">...</div>

      <div
        className={`scroller-middle ${active ? 'scrolling' : ''}`}
        onMouseDown={hleMouseDown}
      >
        <svg>...</svg>
      </div>
    </>
  );
}