React+TypeScript+Tailwind项目如何用useState实现点击切换移动端导航栏显隐

问题原因排查 #

你代码里有3个核心问题导致点击后菜单无法正常显示：

• 右侧作为菜单触发按钮的svg元素没有绑定点击事件，无法修改navbarOpen的状态值
• 可折叠导航的显示类名用了flex，但内部菜单项都是块级元素，会导致布局异常，应该改为block
• 可折叠导航没有加移动端专属的md:hidden类，会导致桌面端也意外显示折叠菜单

修复后的完整代码 #

const [navbarOpen, setNavbarOpen] = useState(false)
return (
    <header>
      {/* mobile navbar */}
      <div className='cursor-pointer'>
        <div className='flex justify-between md:hidden px-8 py-4'>
          <div className='flex'>
            <button>
              <svg
                xmlns='http://www.w3.org/2000/svg'
                className='w-8 h-8 text-white p-2 bg-indigo-500 rounded-full flex self-center'
                viewBox='0 0 24 24'
                onClick={onClickHome}
              >
                <path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'></path>
              </svg>
            </button>
            <span className='ml-3 text-md cursor-pointer' onClick={onClickHome}>
              Chat App
            </span>
          </div>
          {/* 补全汉堡图标+点击切换状态的事件 */}
          <svg
            xmlns='http://www.w3.org/2000/svg'
            className="h-6 w-6 self-center"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            onClick={() => setNavbarOpen(prev => !prev)}
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </div>
       {/* 调整可折叠导航的类名规则 */}
        <div className={`md:hidden ${navbarOpen ? 'block' : 'hidden'}`}>
          <div
            onClick={() => {
              onClickUserManagement()
              setNavbarOpen(false)
            }}
            className='text-center block text-base hover:text-gray-900 mb-1'
          >
            User All
          </div>
          <div
            onClick={() => {
              onClickSetting()
              setNavbarOpen(false)
            }}
            className='text-center block text-base hover:text-gray-900 mb-1'
          >
            Setting
          </div>
          <div
            onClick={() => {
              onClickSetting()
              setNavbarOpen(false)
            }}
            className='text-center block text-base hover:text-gray-900 mb-1 pb-4'
          >
            Third Link
          </div>
        </div>
      </div>
    </header>
  )
})

上述代码还额外增加了点击菜单项后自动关闭导航栏的逻辑，符合常规移动端交互习惯。

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