当前位置：首页 > 文章列表 > 文章 > 前端 > React 监听 body 事件实现拖拽控制

React 监听 body 事件实现拖拽控制

2026-04-01 21:03:32 0浏览收藏

✅ 核心原则：状态驱动 + 副作用受控

原生 JS 中依赖全局变量 active 控制状态，但在 React 函数组件中，普通变量在每次渲染后即被丢弃。因此必须使用 useState：

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

active 不再是易失的局部变量，而是可触发重渲染、可被 useEffect 响应的可靠状态源。

✅ 正确绑定 document.body 事件：useEffect 是唯一可信入口

不要在事件处理器内直接调用 document.body.addEventListener —— 这会导致每次 active 变化时重复绑定。应利用 useEffect 的依赖数组和清理函数，实现「仅当 active 为 true 时绑定，且自动解绑」：

useEffect(() => {
  if (!active) return;

  const handleMouseUp = () => setActive(false);

  document.body.addEventListener('mouseup', handleMouseUp);

  // 清理：组件卸载或 active 变为 false 前移除监听器
  return () => {
    document.body.removeEventListener('mouseup', handleMouseUp);
  };
}, [active]);

⚠️ 注意：[active] 是关键依赖项。useEffect 会在 active 从 false → true 时执行绑定；当 active 变为 false 或组件卸载时，自动执行清理函数，杜绝事件残留。

✅ 无需 useRef 操作 body —— 类名通过状态动态注入

原问题中试图用 useRef 获取 .scroller-middle 并手动 classList.add/remove，这违背了 React 的声明式理念。正确方式是将 CSS 类名逻辑内联到 JSX 中：

 setActive(true)}
>

这样既避免了 DOM 直接操作，又确保类名与状态严格同步，且支持服务端渲染（SSR）兼容。

✅ 完整可运行示例（含 TypeScript 提示）

import { useState, useEffect } from 'react';

export default function ScrollHandler() {
  const [active, setActive] = useState(false);

  // 监听 body mouseup：仅当 active 为 true 时生效
  useEffect(() => {
    if (!active) return;

    const handleMouseUp = () => setActive(false);
    document.body.addEventListener('mouseup', handleMouseUp);

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

  return (
    <>
      
        
      

       setActive(true)}
      >
        
      
    
  );
}

⚠️ 重要注意事项

禁止在事件处理器中直接操作 document.body：如 document.body.addEventListener(...) 写在 onMouseDown 里，会随每次点击重复绑定。
useRef 不适用于 body 操作：document.body 是全局单一节点，无需 ref；ref 应用于需要精确 DOM 访问的组件内元素（如动画目标、焦点控制）。
.wrapper 查询问题：若需获取 .wrapper 位置（如 getBoundingClientRect()），应使用 useRef 绑定该元素，而非 querySelector：
```
const wrapperRef = useRef(null);
// 后续可通过 wrapperRef.current?.getBoundingClientRect() 安全访问
```
移动端兼容？ 补充 touchend 监听（document.body.addEventListener('touchend', ...)）以支持触屏设备。

通过状态 + effect 的组合，你不仅实现了与原生 JS 相同的交互逻辑，更获得了 React 生态下的可维护性、可测试性与健壮性。记住：在 React 中，让状态说话，让 effect 执行，让 JSX 声明结果。

好了，本文到此结束，带大家了解了《React 监听 body 事件实现拖拽控制》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！