reactjs - react-bootstrap 如何在选择项目时折叠菜单

Question

如何在选择项目后使菜单折叠？

我不知道如何让它在 fiddle 上工作，但这就是我会做的？ https://jsfiddle.net/vjeux/kb3gN/

import React from 'react';
import {Navbar, Nav, NavItem, NavDropdown, DropdownButton, MenuItem, CollapsibleNav} from 'react-bootstrap';

export default class App extends React.Component {

    constructor(props) {
      super(props);
      this.onSelect = this.onSelect.bind(this);
      this.toggleNav = this.toggleNav.bind(this);
      // this.state = {navExpanded: false};
    }

    onSelect(e){
        console.log('OnSelect')
        // console.log(this.state.navExpanded);
        // this.setState({navExpanded: false});
    }

    toggleNav(){console.log('toggle...')};

    // <Navbar inverse fixedTop toggleNavKey={0} navExpanded={this.state.navExpanded} onToggle={() => this.toggleNav()}>
    // <Navbar inverse fixedTop toggleNavKey={0} navExpanded={this.state.navExpanded} >

    render() {
        return (

          <Navbar inverse fixedTop toggleNavKey={0} >
            <Nav right eventKey={0} onSelect={this.onSelect} > {/* This is the eventKey referenced */}
              <NavItem eventKey={1} href="#">Link</NavItem>
              <NavItem eventKey={2} href="#">Link</NavItem>
            </Nav>
          </Navbar>     

      )

    }

    componentDidMount() {

    }
}

React.render(<App />, document.getElementById('example'));

Answer 1

对于 2020 年来到这里并使用 Hooks 的人来说，也许您正在使用 react-router，因此，而不是 Nav.Link 是您使用 react-router 中的 Link 导航栏的默认组件。

你发现了什么？结果，移动菜单无法按预期工作，并且单击链接后也不会关闭，并且似乎没有任何效果。

这是我针对该问题的“简单”解决方案(使用钩子(Hook)):

首先我们设置一个钩子(Hook):

const [expanded, setExpanded] = useState(false);

第二个在导航栏中我们添加此 Prop :

<Navbar expanded={expanded}>

现在我们可以控制菜单的可见性，在“第一次”加载时它将被隐藏。

第三我们向切换处理程序添加一个 onClick 事件来更改菜单可见性状态:

<Navbar.Toggle onClick={() => setExpanded(expanded ? false : "expanded")} />

第四我们将属性onClick={() => setExpanded(false)}添加到react-router中的所有Link组件在我们的导航栏中。

利润!我发誓，经过 1 个多小时的上网探索，这是我找到的最简单、最干净的解决方案。