Как настроить меню гамбургера с помощью React-Hamburger-Menu? - PullRequest
Новая
       25

Как настроить меню гамбургера с помощью React-Hamburger-Menu?

0 голосов
/ 05 апреля 2019

Я пытаюсь создать меню, которое использует CSS3 для постепенного исчезновения при нажатии на меню гамбургера. Я пользуюсь реакция-гамбургер-меню .

Хотя я не могу понять, как использовать функцию handleClick и как сделать так, чтобы при нажатии кнопки меню или любой из ссылок он вызывал переключение className.

Я использую стартер реакции Гэтсби, если это имеет значение ...

Вот что я кодировал до сих пор 

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import './Header.css'
import { HamburgerMenu } from "react-hamburger-menu";

handleClick() {
  this.setState({
      open: !this.state.open
  });
}

const Header = ({ siteTitle }) => (
  <div className="Header">
    <div className="HeaderGroup">
      <Link to="/" className="logo"><img src={require('../../images/logo.svg')} width="70" alt="Ryan B. Designs"/></Link>
      <HamburgerMenu 
        isOpen={this.state.open}
        menuClicked={this.handleClick.bind(this)}
        width={18}
        height={15}
        strokeWidth={1}
        rotate={0}
        color='black'
        borderRadius={0}
        animationDuration={0.5}
      />
    </div>
    <div className={"MainNavigation "  + (this.state.open ? 'show' : 'hidden')}>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About Me</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </div>
  </div>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

То, что я хочу, - это когда я нажимаю кнопку гамбургера, меню появляется, а когда вы нажимаете кнопку закрытия или одну из ссылок, меню исчезает с помощью CSS3.

1 Ответ

0 голосов
/ 05 апреля 2019

Помимо синтаксической ошибки @JaromandaX, указанной в комментарии, вы используете setState в компоненте функции.Как сейчас, у this нет setState, я думаю, он указывает на сам модуль.Он должен указывать на компонент класса React, который инициировал состояние: 

class MyComponent extends React.Component {
  // gatsby default environment supports class properties
  state = {
      isOpen: false,
    }
  handleClick = () => this.setState({ ... }) // this is now MyComponent
  render() {
    return (...)
  }
}

, или вы можете использовать useState hook.

...