Иконка ReactJS Hamburger не переключается - PullRequest
Новая
       7

Иконка ReactJS Hamburger не переключается

0 голосов
/ 25 сентября 2018

Я использую эту библиотеку для интерфейса, основанного на Bulma, и у меня возникают проблемы с иконкой гамбургера. Вот документация Пример , но, опять же, это не очень легко понять.Я искал обходной путь и решение для этого, но я не могу найти его, я делаю это в стиле 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;

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Вы можете переключать навигационную панель в чистом Bulma 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");
  }

};

этот подход принят также для вашего случая

0 голосов
/ 25 сентября 2018 
<Navbar.Burger
     active={open}
     onClick={() =>
       this.setState(state => {
         open: !state.open;
       })
     }
 />

Из книги рассказов, с которой вы связаны, пример показывает, что есть обработчик onClick, который устанавливает состояние, чтобы превратить гамбургер в крест.Вам нужен какой-то обработчик, который устанавливает active prop в true.Это изменит гамбургер на крестик, когда вы щелкнете по компоненту.

И из исходного кода этой библиотеки для компонента бургера в используемом вами Navbar,Компонент требует, чтобы вы указали в активной пропе значение true, чтобы установить класс is-active css, который Булма изначально использует для преобразования гамбургера в крест: 

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;
...