如何使用 useState 在点击时显示/隐藏移动导航栏？ React + TypeScript + Tailwind 项目

Posted 2023-03-07

【中文标题】如何使用 useState 在点击时显示/隐藏移动导航栏？ React + TypeScript + Tailwind 项目

【英文标题】：How can I show/hide mobile navbar on click using useState? React + TypeScript + Tailwind project

【发布时间】：2021-10-30 12:17:07

【问题描述】：

作为主题，我尝试使用“useState”在单击时显示/隐藏移动导航栏，但单击时菜单未显示。我该如何解决？

这是与此问题相关的实际代码。

  const [navbarOpen, setNavbarOpen] = useState(false)
  return (
   
      /* 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'
          >
          </svg>
        </div>
       /* collapsable navbar */
        <div className=  navbarOpen ? ' flex' : ' hidden'>
          <div
            onClick=onClickUserManagement
            className='text-center block text-base hover:text-gray-900 mb-1'
          >
            User All
          </div>
          <div
            onClick=onClickSetting
            className='text-center block text-base hover:text-gray-900 mb-1'
          >
            Setting
          </div>
          <div
            onClick=onClickSetting
            className='text-center block text-base hover:text-gray-900 mb-1 pb-4'
          >
            Third Link
          </div>
        </div>
      </div>
    </header>
  )
)

【问题讨论】：

我没有看到任何调用setNavbarOpen(true)，你需要调用它。

非常感谢！没错，我忘了将 onClick=() => setNavbarOpen(!navbarOpen) 添加到菜单图标中。谢谢。

好吧，现在移动菜单在我单击它以在移动设备上显示后保持打开状态，并将其放大到平板电脑/网络视图。 我想在 className 中添加“md-hidden”来解决它。我该怎么做？

自己解决了。 className='md:hidden'+ (navbarOpen ? 'flex' : 'hidden') 非常感谢！

不错！不客气

【参考方案1】：

这是我在评论区从 Zeke Hernandez 那里得到的答案。

className='md:hidden'+ (navbarOpen ? ' flex' : ' hidden')

此问题现已结束。谢谢。