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

我已经从这个 link 中找到了解决方案 https://github.com/react-bootstrap/react-bootstrap/issues/1301

我会把上面link的示例代码放在这里

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 2

与问题稍微相关，可能对某人有帮助这就是我在菜单外单击时关闭导航栏所做的

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 3

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

Answer 4

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

的导航栏的默认组件

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

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

首先我们设置一个钩子：

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

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

<Navbar expanded={expanded}>

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

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

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

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

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

Answer 5

Josef 的决定对我有用我实现了所有四点。不过我还有点别的妆:

            <Navbar expanded={expanded} bg="light" expand="lg" className="p-3">
            <Navbar.Brand href="/"><img src={CarLogo} alt="Tim-Tim auto" title="Tim-Tim auto" /></Navbar.Brand>
            <Navbar.Toggle onClick={() => setExpanded(expanded ? false : "expanded")} aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
                    <Nav> 
                        <Nav.Item><NavLink onClick={() => setExpanded(false)} exact to='/'>Home</NavLink></Nav.Item>
                        <Nav.Item><NavLink onClick={() => setExpanded(false)} to='/Cars'>Cars</NavLink></Nav.Item>
                        <Nav.Item><NavLink onClick={() => setExpanded(false)} to='/about'>About</NavLink></Nav.Item>
                        <Nav.Item><NavLink onClick={() => setExpanded(false)} to='/news'>News</NavLink></Nav.Item>
                        <Nav.Item><NavLink onClick={() => setExpanded(false)} to='/contacts'>Contacts</NavLink></Nav.Item>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>

Answer 6

我喜欢@Josep Vidal 的post，因为我遇到了同样的问题，但是，我对他的回答有一点改动。虽然他的方法在这一点上确实是最好的方法，但我相信如果不使用

函数会更清晰

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

我们做到了

<Navbar.Toggle onClick={() => setExpanded((prevExpanded) => (prevExpanded = !prevExpanded)) />

另外，不需要把 onClick={() => setExpanded(false)} 对于我们所有的 Link 组件，我们可以简单地将它放在父级 Nav

上一次

Answer 7

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

Answer 8

这是我的解决方案，它使用本机 Bootstrap 菜单功能。原因是折叠菜单时有更多相关行为，例如更改汉堡包菜单图标，因为它具有可切换的 class“折叠”和属性区域扩展的布尔值，因此。

所以...我们让默认的 Bootstrap 功能处理该部分，我们只需要添加功能以使用相同的功能折叠菜单，但它应该只在菜单展开时触发（否则我们会有不想要的冲突行为。）

我们需要一个 const "expanded" 来确定可折叠/可展开菜单的状态，以防止在桌面设备上查看站点并且完整菜单已经可见时展开。

const [expanded, setExpanded] = useState("")

这是我们使用导航栏切换按钮上的单击事件设置的唯一常量。它要么展开要么不展开（我们处理这个），折叠要么不折叠（Bootstrap 处理这个。）

<button
    className={"navbar-toggler collapsed" + expanded}
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbar"
    aria-controls="navbar"
    aria-expanded="false"
    aria-label="Toggle navigation"
    onClick={() => setExpanded(expanded ? "" : " expanded")}
>

我们现在只有在菜单真正展开时才会展开状态，并且由于导航栏切换按钮仅显示在移动设备上（取决于您的配置），因此在桌面设备上不会发生冲突。

现在我们只需要使用默认的 Bootstrap 功能来切换菜单，因此在您想要作为切换器的每个项目上都必须添加该功能。这将处理所有 Bootstrap 行为，因此我们不需要额外的挂钩。

<li className="nav-item" data-bs-toggle={expanded && "collapse"} data-bs-target="#navbar" aria-controls="navbar" onClick={() => setExpanded("")}>

它的作用是仅在菜单展开时触发切换功能，因此仅在移动设备上。没有任何冲突。

我不建议将其添加到容器中 div，因为如果菜单包含带有子项的菜单或搜索表单，这也会触发切换。

期待评论和改进。

Answer 9

对于那些使用反应钩子的人，基于上面的@Alongkorn Chetasumon：

  const wrapperRef = useRef(null);
  const [navExpanded, setNavExpanded] = useState();
  const closeNav =()=> {
    setNavExpanded(false);
  }
  useEffect(() => {
    /**
     * Alert if clicked on outside of element
     */
    function handleClickOutside(event) {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
        //alert("You clicked outside of me!");
        closeNav();
      }
    }

    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
        // Unbind the event listener on clean up
        document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [wrapperRef]);

Answer 10

根据以上答案和一些在线最佳实践，我想出了一些很棒的代码并在这里分享。 Bellow 只是一个 Navbar 组件，您可以轻松地选择它并使用它，因为它是响应式媒体，宽度设置为 500px

import './navbar.css'
import { useState, useEffect } from 'react'
import { Route, BrowserRouter as Router, Switch, Link} from 'react-router-dom'
import Home from './Pages/Home'
import About from './Pages/About'
import Contact from './Pages/Contact'
import Product from './Pages/Product'

const Navbar = () => {
    const [screenWidth, setScreenWidth] = useState(window.innerWidth)
    const [toggleMenu, setToggleMenu] = useState(false)

    function toggle(){
        setToggleMenu( preValue => (!preValue))
    }
     
    useEffect(() => {

        const changeWidth = () => {
            setScreenWidth(window.innerWidth);
          }
          window.addEventListener('resize', changeWidth)

        return () => {
            window.removeEventListener('resize', changeWidth)
        }

    },[])

    return (
        <Router>
            <nav>
                {// better to use Link component instead of href as Link will keep entire operation at client side and not reeload the page
                }
            {
                (toggleMenu || screenWidth >= 500 ) && (
                <ul className='list'>
                <li className='items'><Link onClick={() => setToggleMenu(false)} to='/'>Home</Link></li>
                <li className='items'><Link onClick={() => setToggleMenu(false)} to='/about'>About Us</Link></li>
                <li className='items'><Link onClick={() => setToggleMenu(false)} to='/product'>Product</Link></li>
                <li className='items'><Link onClick={() => setToggleMenu(false)} to='/contact'>Contact Us</Link></li>
            </ul>
                )

            }
            <button className='btn'
            onClick={toggle}>Btn</button>
        </nav>

        <Switch>
            <Route path='/contact'><Contact /></Route>
            <Route path='/product'><Product /></Route>
            <Route path='/about'><About /></Route>
            <Route path='/'><Home /></Route>
        </Switch>
        </Router>
    )
}

export default Navbar

Answer 11

这是一个老问题，我不知道这个选项当时是否可用，但请在您的导航栏组件中使用 collapseOnSelect。这是正确且非常快速的解决方案！

<Navbar **collapseOnSelect** className="header" bg="light" expand="lg">
      <Nav.Link className="navbar-link navbar-link-header" as={NavLink} to="/">
        <Navbar.Brand>
         
        </Navbar.Brand>
      </Nav.Link>

      <Navbar.Toggle aria-controls="basic-navbar-nav" />

      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="me-auto">
          <Nav.Link className="navbar-link" as={NavLink} to="/resume">
        
          </Nav.Link>
          <Nav.Link className="navbar-link" as={NavLink} to="/portfolio">
         
          </Nav.Link>
          <Nav.Link className="navbar-link" as={NavLink} to="/blogs">
         
          </Nav.Link>
          <Nav.Link className="navbar-link" as={NavLink} to="/contact">
        
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>

    </Navbar>

Answer 12

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

渲染为 Link

在此处添加 collapseOnSelect 道具。

<Navbar collapseOnSelect expand="false">

并为每个 Nav.Link 添加 eventKey 属性。

<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 13

@Josep Vidal 的解决方案对我来说几乎完美。但是，当用户在打开导航菜单后改变主意并且不想再 select 和 link 时会发生什么？在导航栏菜单外单击不再有效。

解决方案：使用@Josep Vidal 的解决方案后，您还需要将整个 Navbar 元素包装在 div 中，如下所示：

<div onClick={() => (expanded ? setExpanded(false) : false) }> {/*Navbar element*/} </div>

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

react-bootstrap how to collapse menu when item is selected

reactjs

react-bootstrap