React中点击关闭汉堡菜单问题求助

你当前的汉堡菜单依赖原生checkbox的:checked伪类控制显示，但点击NavLink跳转时不会自动重置checkbox状态，导致菜单始终展开。用React的useState接管菜单状态就能彻底解决这个问题，具体操作如下：

1. 引入并初始化菜单状态 #

在组件顶部引入useState，定义菜单的展开/收起状态：

import { useState } from 'react';
// 保留你的其他导入（NavLink、图片资源等）

function YourComponent() {
  const [menuOpen, setMenuOpen] = useState(false);
  // 保留你的现有状态（如city）和方法（如searchLocation）

2. 修改导航栏逻辑，用状态控制菜单 #

替换原生checkbox为受控组件，给导航链接添加关闭菜单的点击事件，同时用状态控制菜单的显示类名：

{city ?
  <nav>
    {/* 受控checkbox，同步React状态 */}
    <input 
      id="nav-toggle" 
      type="checkbox" 
      checked={menuOpen}
      onChange={(e) => setMenuOpen(e.target.checked)}
      style={{ display: 'none' }} // 隐藏原生checkbox，只用汉堡按钮触发
    />
    <div className="nav-input">
      {/* 搜索表单部分保持不变 */}
      <form method='POST' type="text" className='form' onSubmit={searchLocation}>
        <input className="form-input" name='city' placeholder='Enter your location ...' />
        <button type="submit" class="search-button">
          <img src={search} />
        </button>
      </form>
    </div>
    {/* 用menuOpen状态控制菜单显示 */}
    <ul className={`links ${menuOpen ? 'active' : ''}`}>
      <li>
        <NavLink 
          to="/now" 
          style={({ isActive }) => isActive ? active : undefined}
          onClick={() => setMenuOpen(false)} // 点击后关闭菜单
        >Now</NavLink>
      </li>
      <li>
        <NavLink 
          to="/hourly" 
          style={({ isActive }) => isActive ? active : undefined}
          onClick={() => setMenuOpen(false)}
        >Hourly</NavLink>
      </li>
      <li>
        <NavLink 
          to="/daily" 
          style={({ isActive }) => isActive ? active : undefined}
          onClick={() => setMenuOpen(false)}
        >Daily</NavLink>
      </li>
    </ul>
    {/* 汉堡按钮点击切换状态 */}
    <label 
      htmlFor="nav-toggle" 
      className={`icon-burger ${menuOpen ? 'active' : ''}`}
    >
      <div className="line"></div>
      <div className="line"></div>
      <div className="line"></div>
    </label>
    {/* 城市名称部分保持不变 */}
    <div className='city-name'>
      <p>weather at: </p>
      <h4>{city}</h4>
    </div>
  </nav>
  :
  {/* 首页搜索输入部分保持不变 */}
  <>
    <div className='nav-start-page'>
      <div>
        <h3>Get Your Forecast</h3>
      </div>
      <div>
        <Link className='location-link' to="/location">
          <img src={location} />
        </Link>
      </div>
      <div>
        <form method='POST' type="text" onSubmit={searchLocation}>
          <input className="form-input" name='city' placeholder='Enter your location ...' />
          <button type="submit" class="search-button">
            <img src={search} />
          </button>
        </form>
      </div>
    </div>
  </>
}

3. 调整CSS规则适配状态控制 #

原来的CSS是通过#nav-toggle:checked ~ .links控制菜单显示，现在替换为类名控制：

/* 替换原有的checkbox控制规则 */
.links {
  /* 菜单默认隐藏的样式 */
  display: none;
  /* 保留你原有的其他样式 */
}
.links.active {
  /* 菜单展开时的样式 */
  display: block;
  /* 保留你原有的其他展开样式 */
}

/* 可选：给汉堡按钮添加激活态样式（比如变成叉号） */
.icon-burger.active .line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.icon-burger.active .line:nth-child(2) {
  opacity: 0;
}
.icon-burger.active .line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

核心逻辑说明 #

• 用useState统一管理菜单状态，避免原生DOM状态和React状态不一致的问题
• 点击汉堡按钮时通过checkbox的onChange切换状态，点击导航链接时主动将状态设为false关闭菜单
• 类名切换替代原生伪类控制，让React完全接管UI渲染逻辑

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