react-bootstrap navbar onToggle 捕获事件答案

【问题标题】：react-bootstrap navbar onToggle capture eventreact-bootstrap navbar onToggle 捕获事件
【发布时间】：2018-03-10 11:22:16
【问题描述】：

典型的 react-bootstrap 导航场景。我构建了一个自定义下拉列表（折叠），因为我不喜欢引导版本。我遇到的问题是在捕获与从桌面更改为移动 768px 的屏幕相关联的导航栏 onToggle“事件”。我什至不知道是否有这样的事件，因为文档没有说什么。

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

演示：node-two.n2local.com

我最终做了什么：添加了一个“调整大小”事件侦听器来检测移动设备和桌面设备的屏幕尺寸。当检测到桌面时，会将 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>

【问题讨论】：

标签： reactjs addeventlistener collapse react-bootstrap

【解决方案1】：

我还没有弄清楚 onToggle 事件的问题；但是，我正在将自定义代码与 Bootstrap 混合使用。我最终没有使用引导的默认切换方法，而是使用我自己的字形作为按钮滚动。我希望这段代码可以帮助那些可能想做同样事情的人。演示和 github 已更新。

【讨论】：