モバイルメニュートグルボタンは、ページをトップに移動します。

Question

このNavBarコンポーネントはモバイル版で作成しました。

しかし、電話機のメニュー/クローズボタンをクリックすると、トグルは機能しますが、ページは一番上に移動します。 誰かがそれを防ぐ方法を知っていますか？

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

これはおそらくReactの代わりにアンカータグに問題があります。 hrefにjavascript:void(0)を設定するか、＃を削除してみてください。