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

Question

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

我不知道如何让它在小提琴上工作，但这就是我会做的？ 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'));

原文由 Chris G. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我从这个链接找到了解决方案 https://github.com/react-bootstrap/react-bootstrap/issues/1301

我将把上面链接的示例代码放在这里

const Menu = React.createClass ({
  getInitialState () {
    return {
      navExpanded: false
    }
  },

  setNavExpanded(expanded) {
    this.setState({ navExpanded: expanded });
  },

  closeNav() {
    this.setState({ navExpanded: false });
  },

  render() {
    return (
      <div>
        <Navbar onToggle={this.setNavExpanded}
                expanded={this.state.navExpanded}>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="some url">Main</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav onSelect={this.closeNav}>
              { this.renderMenuItem() }
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    )
  }

原文由 Alongkorn 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

这是我对该问题的“简单”解决方案（使用挂钩）：

首先 我们设置一个钩子：

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

第二个 在 Navbar 我们添加这个道具：

 <Navbar expanded={expanded}>

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

第三，我们将 onClick 事件添加到更改菜单可见性状态的切换处理程序：

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

第四，我们将道具 onClick={() => setExpanded(false)} 添加到我们所有的 Link 来自 react-router 的组件。

利润！我发誓，在互联网上闲逛 1 个多小时后，这是我找到的最简单、最干净的解决方案。

原文由 Josep Vidal 发布，翻译遵循 CC BY-SA 4.0 许可协议