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

Question

我有一个从一个模板中获得的汉堡包开关，但我似乎缺少 'activate on/off toggle' 部分，因为当我单击开关时没有任何反应。我缺少什么？

<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

Answer 1

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

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

然后：

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

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

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

React Toggle not working on mobile screen

javascript

toggle

reactjs