React Мобильная навигация не рушится после нажатия

Question

У меня есть передвижная панель навигации, которая появляется в определенной точке останова. Если нажать кнопку MENU, появится меню, и кнопка изменится на CLOSE. Затем нажатие на CLOSE сворачивает меню, и кнопка возвращается в МЕНЮ. Однако, когда я нажимаю на навигационные маршруты, меню остается открытым. Как добавить условие для закрытия меню при нажатии кнопок навигации?

var MobileMenu = React.createClass({ 
    getDefaultProps: function(){ 
    return { 
     isOpen: false 
    }; 
    }, 
    openForm: function(){ 
     window.open('http://localhost:8080.com/form', '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes') 
    }, 
    render: function(){ 
    if (this.props.isOpen){ 
    return (
     <div className="navMenuButtons"> 
      <NavLink to="/" className="navMenuButton">HOME</NavLink> 
      <NavLink to="/about" className="navMenuButton">ABOUT</NavLink> 
      <NavLink to="/faq" className="navMenuButton">FAQ</NavLink> 
      <div className="margin-auto"> 
      <NavLink className="navButton applyButton" onClick={this.openForm}> 
      APPLY 
      </NavLink> 
      </div> 
     </div> 
    ) 
    } 
    return null; 
    } 
}); 

var NavBar = React.createClass({ 
    getInitialState: function() 
     { 
      return { 
       isOpen: false 
      }; 
     }, 
     toggleMenu: function(){ 
     this.setState({isOpen: !this.state.isOpen}); 
    }, 
     openForm: function(){ 
      window.open('http://localhost:8080/form', '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes') 
     }, 
    render: function(){ 
     var mobileMenuClass = this.state.isOpen ? 'navBar navBarOpen cl-effect-21' : 'navBarClose navBar cl-effect-21'; 
     var mobileButton = this.state.isOpen ? 'CLOSE' : 'MENU'; 

     return (
     <div> 
      <div className={mobileMenuClass}> 

      <a href="#" className="mobile_toggle"> 
       <div className="toggle_labels"> 
       <div onClick={this.toggleMenu}className="menu navButton">{mobileButton}</div> 
       </div> 
      </a> 
      <div className="navMenuButtons_desk"> 
      <NavLink to="/" className="navMenuButton">HOME</NavLink> 
      <NavLink to="/about" className="navMenuButton">ABOUT</NavLink> 
      <NavLink to="/faq" className="navMenuButton">FAQ</NavLink> 
      <div className="button_right"> 
       <NavLink target="_blank" className="navButton applyButton" ><div onClick={this.openForm}> 
       APPLY</div> 
       </NavLink> 
      </div> 
      </div> 
      <MobileMenu isOpen={this.state.isOpen} /> 
      </div> 

     </div> 
    ); 
    } 
}); 




var App = React.createClass({ 

    render: function(){ 
    console.log(this.props.location.pathname); 
    const location = this.props.location; 
    return (
     <div> 
     <NavBar /> 
     { this.props.children } 
     <Footer /> 
     </div> 
    ); 
    } 
}); 

Answer 1

Ваши <NavLink> компоненты должны установить isOpen государство false. Вы должны передать им функцию для этого. Что-то вдоль линий этого:

var NavBar = React.createClass({ 
    closeMenu: function() { 
    this.setState({ isOpen: false }) 
    } 

    render() { 
    return (
     <div> 
     <NavLink to="/" onClick={this.closeMenu}>HOME</NavLink> 
     </div> 
    ) 
    } 
}) 

, а затем изменить свой <NavLink> передать onClick опору в <Link>

var NavLink = React.createClass({ 
    render() { 
    const { to, onClick, children } = this.props 
    return <Link to={to} onClick={onClick}>{children}</Link> 
    } 
})