react-bootstrap navbar onToggle 捕获事件

Posted 2023-02-19

【中文标题】react-bootstrap navbar onToggle 捕获事件

【英文标题】：react-bootstrap navbar onToggle capture event

【发布时间】：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>

【参考方案1】：

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