点击链接后隐藏折叠导航栏，react-redux，react-bootstrap答案

【问题标题】：Hide collapse navbar after link click, react-redux, react-bootstrap点击链接后隐藏折叠导航栏，react-redux，react-bootstrap
【发布时间】：2016-11-08 16:06:32
【问题描述】：

我是 react 初学者，所以需要你的帮助。我使用了可折叠的引导导航栏，不知道如何在移动设备上点击链接后使其折叠。原生引导属性 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;

【问题讨论】：

我也遇到了同样的问题，你解决了吗？
我们做了一个没有引导的导航
派对迟到了，但stackoverflow.com/questions/32452695/… 中的答案应该可以解决

标签： reactjs react-bootstrap

【解决方案1】：

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

第二次在Navbar中我们添加了这个prop：

<Navbar expanded={expanded}>

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

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

第四次我们添加道具

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

【讨论】：