React移动端菜单点击菜单项后无法自动关闭如何解决

现有代码问题 #

• 仅实现了菜单展开/收起的切换逻辑，未绑定菜单项点击后重置展开状态的逻辑
• menuActive初始值为null，切换时直接取反会导致状态值在null/boolean类型间混乱，容易出现状态判断异常

修复步骤 #

1. 统一状态类型，补充菜单关闭方法
   将状态初始值改为布尔值，避免类型混乱，同时新增专门的移动端菜单关闭方法：

// 用布尔值统一控制移动端菜单展开状态，默认收起
const [menuActive, setMenuActive] = useState(false);

const handleMenuActive = () => {
  // 用函数式更新避免闭包导致的状态值异常
  setMenuActive(prev => !prev);
};

// 点击菜单项触发的关闭逻辑
const closeMobileMenu = () => {
  // 匹配你项目的移动端响应式断点，避免影响桌面端菜单交互
  if (window.innerWidth < 768) {
    setMenuActive(false);
  }
};

2. 给所有菜单项绑定关闭事件
   在一级菜单、二级子菜单的点击回调中加入关闭逻辑，修改后的渲染代码如下：

{
  menus.map((data,idx) => (
    <li 
      key={idx} 
      onClick={()=> {
        handleDropdown(idx);
        closeMobileMenu();
      }} 
      className={`menu-item ${data.namesub ? 'menu-item-has-children' : ''} ${activeIndex === idx ? 'active' : ''}`} 
    >
      <Link to={data.links}>{data.name}</Link>
      {
        data.namesub &&
        <ul className="sub-menu">
          {
            data.namesub.map((submenu) => (
              <li 
                key={submenu.id} 
                className="menu-item"
                onClick={closeMobileMenu}
              >
                <NavLink to={submenu.links}>{submenu.sub}</NavLink>
              </li>
            ))
          }
        </ul>
      }
    </li>
  ))
}
</ul>
</nav>

额外优化建议 #

如果项目使用React Router，可以引入useLocation钩子监听路由变化，路由跳转时自动调用closeMobileMenu方法，可兼容点击浏览器前进/后退按钮时的菜单收起逻辑。记得将菜单外层容器的显隐样式和menuActive状态绑定，例如搭配mobile-menu-open类名写对应展开/收起的CSS样式即可。

内容的提问来源于stack exchange，提问作者Ken Lee