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捕獲事件

回答

相關問題