React-bootstrap событие захвата панели навигации onToggle

Типичный сценарий навигации с реактивной загрузкой. Я создал настраиваемый раскрывающийся список (сворачивание), так как мне не понравилась версия начальной загрузки. Проблема, с которой я столкнулся, заключается в захвате события onToggle Navbar, связанного с изменением экрана с рабочего стола на мобильный 768 пикселей. Я даже не знаю, есть ли такое событие, потому что в документации ничего об этом не говорится.

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

Демонстрация: node-two.n2local.com

Что я в итоге сделал: добавил прослушиватель событий resize для определения размеров экрана на мобильных устройствах и на компьютерах. При обнаружении рабочего стола он устанавливает состояние отображения для div nav_menu_links на 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>