javascript - 移动菜单切换按钮将页面移至 React 顶部

Question

我用移动版本创建了这个导航栏组件。

但是，当我单击手机上的菜单/关闭按钮时，切换会起作用，但会将页面移至顶部。有人知道如何防止这种情况发生吗？

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} onToggle={this.toggleMenu} />
              </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

这可能是你的 anchor 标记而不是 React 的问题。尝试在 href 上设置 javascript:void(0)，或删除 #。