Question

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

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

演示：node-two.n2local.com

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

我想做什么：捕获并使用引导程序导航栏切换事件来更改显示和滚动锁定而不是使用事件侦听器。

以下是我的渲染的移动一半。您可以看到有问题的菜单'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>

Answer 1

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

react-bootstrap navbar onToggle capture事件

1 个答案: