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'));

Answer 1

对于任何人来到这里，在2020年，并使用钩子，也许你正在使用react-router，并且作为结果，而不是Nav.Link那些你使用的导航栏的默认组件Link从react-router。

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

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

首先我们设置一个钩子：

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

其次 在Navbar我们添加这个道具：

<Navbar expanded={expanded}>

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

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

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

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

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

Answer 2

我从这个链接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>
    )
  }

Answer 3

这里有很多答案，但今天的修复非常简单。无需使用状态或单击事件。这是假设您正在渲染Link每个Nav.Link.

在这里添加collapseOnSelect道具。

<Navbar collapseOnSelect expand="false">

并将eventKeyprop 添加到每个Nav.Link.

<Nav.Link as={Link} to="/page1" eventKey="1">Page 1</Nav.Link>
<Nav.Link as={Link} to="/page2" eventKey="2">Page 2</Nav.Link>

Answer 4

与问题略有相关，可能对某人有帮助这是我在菜单外单击时关闭导航栏的操作

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isNavExpanded: false
    };
  
    this.setIsNavExpanded = (isNavExpanded) => {
      this.setState({ isNavExpanded: isNavExpanded });
    }
  
    this.handleClick = (e) => {
      if (this.node.contains(e.target)) {
        // if clicked inside menu do something
      } else {
        // If clicked outside menu, close the navbar.
        this.setState({ isNavExpanded: false });
      }
    }
  }
  componentDidMount() {
    document.addEventListener('click', this.handleClick, false);      
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleClick, false);
  }

  render() {
    return (
      <div ref={node => this.node = node}
        <Navbar collapseOnSelect
           onToggle={this.setIsNavExpanded}
           expanded={this.state.isNavExpanded}
           >
          <Navbar.Collapse>
            // Nav Items
          </Navbar.Collapse>
        </Navbar>
      </div>
    )
  }

Answer 5

<Navbar collapseOnSelect ... >应该可以完成这项工作，但它工作不稳定:(

Answer 6

import React, { Component } from "react";
import { Navbar, Nav, Container } from 'react-bootstrap';
import logo from '../assets/logo.png';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default class Menu extends Component {
  constructor(props) {
    super(props);

    this.state = {
      navExpanded: false
    };
  }

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

  setNavClose = () => {
    this.setState({ navExpanded: false });
  }

  render() {
    return (
      <Navbar bg="dark" variant="dark" expand="lg" onToggle={this.setNavExpanded} expanded={this.state.navExpanded}>
        <Container>
          <Navbar.Brand>
              <Link to={"/"} className="navbar-brand"><img src={logo} height="30"></img></Link>
          </Navbar.Brand>          
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="mr-auto" onClick={this.setNavClose}>
              <Link to={"/"} className="nav-link">Home</Link>
              <Link to={"/"} className="nav-link">Contact</Link>
            </Nav>          
          </Navbar.Collapse>
        </Container>
      </Navbar>
    );
  }
}