React Toggle 在移动屏幕上不起作用答案

【问题标题】：React Toggle not working on mobile screenReact Toggle 在移动屏幕上不起作用
【发布时间】：2021-01-28 16:02:34
【问题描述】：

我有一个从一个模板获得的汉堡包切换，但似乎我缺少“激活开/关切换”部分，因为当我单击切换时没有任何反应。我错过了什么？

<div data-testid="header">
    <header id="header" className="site-header">
        <div className="container">
          <div className="right-header">
            <nav className="main-menu">
              <button
                type="button"
                className="c-hamburger c-hamburger--htx"
              >
                <span />
              </button>
              <ul>
                <li>
                  <Link to="/news">
                    {headerText.news}
                    <i className="fa fa-caret-down" aria-hidden="true" />
                  </Link>
                </li>
             </div>
           </div>
         </header>
       </div>

图片中的模板（我得到代码的地方）正在工作。只是html

【问题讨论】：

你需要钩子按钮来做一些onClick

标签： javascript reactjs toggle

【解决方案1】：

您将使用状态来存储菜单的状态。

const [hamburgerState, setHamburgerState] = useState(true);

然后：

<button type="button"
onClick={() => hamburgerState?setHamburgerState(false):setHamburgerState(true);}
className="c-hamburger c-hamburger--htx">
<span/>
</button>

然后您将使用此状态变量的值来更改菜单的可见性，通常是通过更改类名。

【讨论】：