1
典型的な反応ブートストラップナビゲーションシナリオ。私はブートストラップバージョンが気に入らなかったので、カスタムドロップダウン（折りたたみ）を構築しました。私がいる問題は、画面がモバイル768pxにデスクトップから変更に関連したナビゲーションバーonToggle「イベント」を獲得しています。私は、ドキュメントがそれについて何も言わないようなイベントがあるかどうか分からない。反応ブートストラップナビゲーションバーonToggleキャプチャイベント
GitHubの：https://github.com/haldous2/node_react_login_bootstrap_custom
デモ：node-two.n2local.com私がやってしまった何を
：画面は、モバイルとデスクトップのサイズを検出するために、 'リサイズ' イベントリスナを追加しました。デスクトップが検出されるとセットがnoneにnav_menu_links divのために状態を表示し、また、スクロールロックをオフにしています。代わりに、イベントリスナーを使用しての表示とスクロールロックを変更するには、ブートストラップナビゲーションバーのトグルイベントをキャプチャして使用します。私がやりたい何
。
以下は、私のレンダリングのモバイル半分です。あなたは問題のメニュー '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>