Question

我正在使用基于Bulma的前端库，并且遇到了Hamburger Icon的问题这里是文档Example，但这又不是很容易理解。我已经找到了解决方法和解决方案，但是我找不到它，我正在使用ES6 Style，这是我的代码。

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;
       })
     }
 />

从您链接到的故事书中，该示例显示了一个onClick处理程序，该处理程序设置了将汉堡包更改为十字架的状态。您需要某种将active道具设置为true的处理程序。只要您单击该组件，汉堡包就会变成叉形。

从source code of that library中使用Navbar内的burger组件，该组件要求您将活动属性设置为true，以设置is-active css类，布尔玛（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

您可以使用引用用法在纯布尔玛CSS中切换导航栏：

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 Hamburger图标不切换

3 个答案: