react-bootstrap navbar onToggle捕获事件

典型的react-bootstrap导航方案。我已经构建了自定义下拉列表（折叠），因为我不喜欢引导版本。我遇到的问题是捕获Navbar onToggle'事件'与屏幕更改从桌面到移动768px关联。我甚至不知道是否有这样的事件，因为文件没有提到这件事。react-bootstrap navbar onToggle捕获事件

GitHub上：https://github.com/haldous2/node_react_login_bootstrap_custom

演示：node-two.n2local.com

我最终什么事做：添加了 '调整大小' 事件监听器来检测屏幕尺寸移动和桌面。检测到桌面时，将nav_menu_links div的显示状态设置为none，并关闭滚动锁定。

我想要做的是：捕获并使用bootstrap导航栏切换事件来更改显示和滚动锁定，而不是使用事件侦听器。

以下是我的渲染的移动一半。你可以看到有问题的菜单'nav_menu_links'..它有时浮动和隐藏。

updateDimensions() { 
    this.setState({ width: window.innerWidth, height: window.innerHeight }); 
    this.isMobile(); 
} 
componentDidMount() { 
    this.updateDimensions(); 
    window.addEventListener("resize", this.updateDimensions.bind(this)); 
    document.body.addEventListener('click', this.bodyClick.bind(this)); 
} 
componentWillUnmount() { 
    window.removeEventListener("resize", this.updateDimensions.bind(this)); 
    document.body.removeEventListener('click', this.bodyClick.bind(this)); 
} 
render(){ 
    return(
     <div> 
      <Mobile> 
       <div style={{ paddingTop: '71px' }}></div> 
       <Navbar 
        fixedTop 
        collapseOnSelect 
        onToggle={collapsed=>this.navMenuToggle(collapsed)} 
        style={{ maxHeight:'50px', minWidth:'300px' }} 
       > 
        <Navbar.Header> 
         <Navbar.Brand> 
          <a href="/">Node React Login</a> 
         </Navbar.Brand> 
         <Navbar.Toggle /> 
        </Navbar.Header> 
       </Navbar> 
       <div 
        id='nav_menu' 
        style={{ 
        position:'fixed', 
        minWidth:'300px', 
        zIndex:'100', 
        top:'52px', 
        right:'0', 
        left:'0' 
       }}> 
        <div className="container"> 
         <div 
          id='nav_menu_links' 
          ref={(input) => { this.navBarLinks = input; }} 
          style={{ 
           display:this.state.nav_menu_links_display, 
           width:'300px', 
           float:'right', 
           backgroundColor:'#FFF', 
           border:'1px solid #CCC' 
          }} 
         > 
          {this.state.navMobile} 
         </div> 
        </div> 
        <div 
         id='nav_menu_search' 
         ref={(input) => { this.navBarSearch = input; }} 
         style={{ 
          display:this.state.nav_menu_search_display, 
          width:'300px', 
          float:'right', 
          backgroundColor:'#FFF', 
          border:'1px solid #CCC' 
         }} 
        > 
        Search 
        </div> 
       </div> 
      </Mobile> 
      <Desktop> 
       ... 
      </Desktop>

来源

2017-09-28 user3167138

我还没有想出onToggle事件问题;然而，我正在用自定义代码和Bootstrap的结合来锻造。我最终没有使用引导程序的默认切换方法，并使用我自己的字形作为按钮进行滚动。我希望这段代码能够帮助那些可能想要这样做的人。演示和github已更新。

来源

2017-10-27 20:48:58 user3167138

react-bootstrap navbar onToggle捕获事件

回答

相关问题