javascript - 如何在单击时更改元素的类名？ (汉堡菜单)

Question

我正在尝试制作一个汉堡菜单，单击时我希望“移动 View 汉堡”下拉(从显示:flex 到显示:初始)。似乎我无法让 js 工作..

我是 JavaScript 和 React 的新手，有人可以解释一下缺少什么吗？

从函数 Nav 返回和导出并在 App.js 中呈现的 html:

      <div class="Navbar__Link Navbar__Link-brand">
        <NavLink to="/" exact>
          <img className="logo" src="https://i.imgur.com/KnEvuRJ.png"></img>
        </NavLink>

      </div>
        <div class="Navbar__Link Navbar__Link-toggle">
          <i class="fa fa-bars"></i>
      </div>

      <nav class="Navbar__Items">
        <div class="Navbar__Link">
          <NavLink className="nav-link" to="/" exact activeClassName="active">
            Home
          </NavLink>
        </div>
        <div class="Navbar__Link">
          <NavLink className="nav-link" to="/about" activeClassName="active">
            About
          </NavLink>
        </div>
        <div class="Navbar__Link">
          <NavLink className="nav-link" to="/chars" activeClassName="active">
            Characters
          </NavLink>
        </div>
        <div class="Navbar__Link">
          <NavLink className="nav-link" to="/login" activeClassName="active">
            Login
          </NavLink>
        </div>
      </nav>
    </div>

切换的js代码:

  function classToggle() {
    const navs = document.querySelectorAll('.Navbar__Items')

    navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
  }

  document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);

CSS:(在@media.. 内)

.Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
   } 

类型错误:无法读取 null 的属性“addEventListener”

Answer 1

这不是 React 的工作方式，这里绝对没有必要使用 vanilla js。如何将类切换行为与 state 的属性绑定(bind)？

class Component extends React.Component{
    state = {
        isButtonToggled: false
    }

    handleClick = () => this.setState({isButtonToggled : !this.state.isButtonToggled})

    render(){
        const { isButtonToggled } = this.state
        const buttonStyle = classnames({
            ['button-root'] : true,
            ['button-toggled'] : isButtonToggled
        })

        return(
            <button onClick={this.handleClick} className={buttonStyle}>Click</button>
        )
    }
}