negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.04k stars 582 forks source link

cannot close menu when click on link in the menu #370

Closed sebalaini closed 4 years ago

sebalaini commented 4 years ago

this is my App.js

class App extends React.Component {
  constructor () {
    super()

    this.state = {
      language: ESLocale,
      menuOpen: false
    }
  }

  handleStateChange (state) {
    this.setState({
      menuOpen: state.isOpen
    })
  }

  // This can be used to close the menu, e.g. when a user clicks a menu item
  closeMenu () {
    this.setState({
      menuOpen: false
    })
  }

  changeLanguage = () => {
    this.setState({
      language: this.state.language === ESLocale ? ENLocale : ESLocale
    })
  }

  render () {
    return (
      <div id='outer-container'>
        <Menu
          isOpen={this.state.menuOpen}
          onStateChange={(state) => this.handleStateChange(state)}
          closeMenu={this.closeMenu}
          changeLanguage={this.changeLanguage}
          {...this.state.language.header}
        />

and this is my Header class inside Header.js

export default class Header extends React.Component {
  render () {
    return (
      <Menu
        burgerBarsClassName={'navbar__menu-icon'}
        pageWrapId={'page-wrap'}
      >
        <a className="menu-item" onClick={this.props.closeMenu} href="#home">
          <span>
            <svg viewBox="0 0 576 512">
              ...
            </svg>
            <span>
              {this.props.home}
            </span>
          </span>
        </a>
...

Why I cannot close the menu? it's complaining about Uncaught TypeError: Cannot read property 'setState' of undefined at closeMenu

sebalaini commented 4 years ago

I figured out why doesn't work, function scoping