ReactJS 汉堡图标不切换

Question

我正在使用这个基于 Bulma 的前端库，但我遇到了 Hamburger Icon 的问题这是文档 Example，但这又不是一件容易的事理解。我已经为此搜索了变通方法和解决方案，但找不到，我正在使用 ES6 样式进行操作，这是我的代码。

import React, { Component } from "react";
import { Navbar } from "react-bulma-components/full";
class MenuNavbar extends Component {
  render() {
    return (
      <div id="header">
        <Navbar color="info" fixed="top">
          <Navbar.Brand>
            <Navbar.Item renderAs="a" href="/">
              <img src="https://i.imgur.com/9jQaBuq.png" alt="Dew Ventures" />
            </Navbar.Item>
            <Navbar.Burger />
          </Navbar.Brand>
          <Navbar.Menu>
            <Navbar.Container>
              <Navbar.Item href="/">Home</Navbar.Item>
              <Navbar.Item href="/about"> About Us</Navbar.Item>
              <Navbar.Item href="/contact"> Contact Us</Navbar.Item>
            </Navbar.Container>
          </Navbar.Menu>
        </Navbar>
      </div>
    );
  }
}

export default MenuNavbar;

Answer 1

<Navbar.Burger
     active={open}
     onClick={() =>
       this.setState(state => {
         open: !state.open;
       })
     }
 />

从您链接到的 Storybook 中，该示例显示有一个 onClick 处理程序设置状态以将汉堡包变成十字形。您需要某种处理程序将 active 属性设置为 true。每当您单击该组件时，这会将汉堡包更改为十字形。

并且从您正在使用的 Navbar 中的汉堡组件的 source code of that library 开始，该组件要求您将 active prop 传递为 true 以设置 is-active css class，Bulma 原生使用它来将汉堡改成十字架：

import React, { Component } from "react";
import { Navbar } from "react-bulma-components/full";
class MenuNavbar extends Component {
  // set active state for hamburger
  state = { active : false }

  handleClick = () => { 
     const { active } = this.state;
     this.setState({ active: !active }); 
  }
  render() {
    return (
      <div id="header">
    <Navbar color="info" fixed="top" active={this.state.active}>
          <Navbar.Brand>
            <Navbar.Item renderAs="a" href="/">
              <img src="https://i.imgur.com/9jQaBuq.png" alt="Dew Ventures" />
            </Navbar.Item>
            <Navbar.Burger
              active={this.state.active}
              onClick={this.handleClick}
    />
          </Navbar.Brand>
          <Navbar.Menu>
            <Navbar.Container>
              <Navbar.Item href="/">Home</Navbar.Item>
              <Navbar.Item href="/about"> About Us</Navbar.Item>
              <Navbar.Item href="/contact"> Contact Us</Navbar.Item>
            </Navbar.Container>
          </Navbar.Menu>
        </Navbar>
      </div>
    );
  }
}

export default MenuNavbar;

Answer 2

您可以在纯 Bulma CSS 中使用 ref 用法切换导航栏：

burger = React.createRef();
menu = React.createRef();

toggle = () => {

  if (this.menu.current.classList.contains("is-active")) {
    this.menu.current.classList.remove("is-active");
  } else {
    this.menu.current.classList.add("is-active");
  }

};

您的案例也采用了这种方法

Answer 3

利用 UseEffect 即插即用 React usag... 请记住将 nav-toggle 和 navbar-menu 类分别添加到您的 burger 和 nav

  useEffect(() => {
(function() {
  var burger = document.querySelector('.nav-toggle');
  var menu = document.querySelector('.navbar-menu');
  burger.addEventListener('click', function() {
      burger.classList.toggle('is-active');
      menu.classList.toggle('is-active');
  });
 })();
}, [])



        <nav className="navbar">
          <div className="navbar-brand is-1">
            <a href="/" className="navbar-item">
              <img src={logo} alt="YMCA"/>
            </a>
            <button className="navbar-burger burger is-white button nav-toggle"
            aria-label="menu" aria-expanded="false" data-target="Options">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </button>
          </div>
          <div  className="navbar-menu is-8 is-offset-a" id="Options">
            <div className="navbar-end mt-2">
              <button type="submit">Association Level Prediction</button>
              <button type="submit" >Custom Prediction</button>
              <button type="submit" onClick={() => handleNavigate(ROUTE_ABOUT)} className={checkIfActive(ROUTE_ABOUT)}>About</button>
              <button type="submit" onClick={() => handleLogout()} className={checkIfActive('logout')}>Logout</button>
            </div>
          </div>
      </nav>

ReactJS 汉堡图标不切换

ReactJS Hamburger icon not toggling

reactjs

bulma