点击链接后隐藏折叠导航栏，使用react-redux和react-bootstrap。

Question

我是react的初学者，所以需要你的帮助。我使用了可折叠的bootstrap导航栏，但不知道如何在移动端上单击链接后使其折叠。原生的bootstrap属性“collapseOnSelect”无法正常工作，或者我做错了什么。

const  AppBar = () => (
  <Navbar collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <div className="logo-wrap"> 
          <Link to="define"> 
            <img height='50' src='./../assets/img/logo.png' className="logo"/> 
          </Link> 
        </div> 
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <LinkContainer to="define" className="nav-link"><NavItem eventKey={1}>Home</NavItem></LinkContainer>
        <LinkContainer to="about" className="nav-link"><NavItem eventKey={1}>About</NavItem></LinkContainer>
        <LinkContainer to="features" className="nav-link"><NavItem eventKey={1}>Features</NavItem></LinkContainer>
        <LinkContainer to="pricing" className="nav-link"><NavItem eventKey={1}>Pricing</NavItem></LinkContainer>
        <LinkContainer to="areaMap" className="nav-link"><NavItem eventKey={1}>Area Map</NavItem></LinkContainer>
      </Nav>
      <Nav pullRight>        
        <LinkContainer to="login" className="nav-link"><NavItem eventKey={2}>Log In</NavItem></LinkContainer>
        <LinkContainer to="registration"><NavItem eventKey={2}><Button className="sign-up">Sign Up</Button></NavItem></LinkContainer>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);


export default AppBar;

- Andrii Starusiev

---

我也遇到了同样的问题，你解决了吗？ - jphorta

我们制作了一个没有使用Bootstrap的导航。 - Andrii Starusiev

有点晚了，但是 https://dev59.com/_lwY5IYBdhLWcg3wlolg 中的答案应该可以解决它。 - JoeyHolloway

Answer 1

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

在导航栏中，我们添加了这个属性：

Navbar 中的第二个属性：

<Navbar expanded={expanded}>

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

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

第四步，我们添加prop属性。

<Link to="/" onClick={() => setExpanded(false)}>Menu</Link>

- Pervez