Question

我有一个出现在某个断点的移动导航栏。如果单击按钮MENU，则会出现菜单，按钮将变为CLOSE。然后单击CLOSE折叠菜单，按钮返回MENU。但是，当我点击导航路线时，菜单保持打开状态。如何在单击导航按钮时在此处添加条件以关闭菜单？

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

单击后，React Mobile导航不会崩溃

1 个答案: