React侧边栏切换优化：手动状态优先于响应式自动切换需求

核心思路 #

新增一个状态变量追踪用户是否手动切换过侧边栏，以此决定是否启用响应式尺寸变化的自动调整逻辑，避免用户手动操作被系统自动逻辑覆盖。

代码实现 #

1. 更新状态定义 #

添加userHasToggled状态标记用户的手动操作：

// 侧边栏可见状态：false=可见，true=隐藏
const [sidebarToggled, setSidebarToggled] = useState(false);
// 标记用户是否手动切换过侧边栏
const [userHasToggled, setUserHasToggled] = useState(false);

2. 修改切换按钮逻辑 #

点击按钮时标记用户已执行手动操作：

<button onClick={() => {
  setSidebarToggled(!sidebarToggled);
  setUserHasToggled(true); // 触发手动操作标记
}}>Toggle</button>

3. 调整响应式resize逻辑 #

仅在用户未手动操作时，根据屏幕尺寸自动调整侧边栏状态：

useEffect(() => {
  const handleResize = () => {
    // 用户已手动切换过，跳过自动调整
    if (userHasToggled) return;

    if (window.innerWidth <= 768) {
      setSidebarToggled(true);
    } else {
      setSidebarToggled(false);
    }
  };

  // 绑定resize事件监听
  window.addEventListener('resize', handleResize);
  // 组件挂载时初始化一次，确保状态匹配当前屏幕尺寸
  handleResize();

  // 组件卸载时清理事件监听
  return () => window.removeEventListener('resize', handleResize);
}, [userHasToggled]); // 依赖userHasToggled，状态变化时更新监听逻辑

额外说明 #

• 页面初始加载时会自动执行一次handleResize，保证初始状态符合当前屏幕尺寸
• 一旦用户手动点击切换按钮，后续屏幕尺寸变化不会再修改侧边栏状态
• 若需要恢复默认响应式行为，可添加重置按钮，将userHasToggled设为false

内容的提问来源于stack exchange，提问作者Hamza Anwar