如何获取React-Bootstrap导航栏中的按钮？

所以显然你不能把DOM元素放在React-Bootstrap导航栏中。我想添加一个登录按钮到我的网站的标题。标题由我的徽标和React-Bootstrap导航栏组件组成。我当前的所有Navbar子项都是NavItem组件。如何获取React-Bootstrap导航栏中的按钮？

我希望登录按钮是Navbar的可折叠（汉堡包菜单）部分的一部分，但与其他NavItems不同，此按钮并不意味着将会改变URL路径。点击后，登录按钮只会呈现一个React-Bootstrap Modal组件。

如何让登录按钮成为我的导航栏的一部分？

我的代码...

<Navbar staticTop inverse collapseOnSelect> 
    <Navbar.Header> 
     <Navbar.Brand id="navbarBrand"> 
      <img id="logoImg" src="/images/bvLogo.svg" /> 
     </Navbar.Brand> 
     <Navbar.Toggle /> 
    </Navbar.Header> 
    <Navbar.Collapse> 
     <Nav pullRight> 
      <RouteNavItem className="headerLinks" eventKey={1} href="/">Home</RouteNavItem> 
      <RouteNavItem className="headerLinks" eventKey={2} href="/shop">Shop</RouteNavItem> 
      <RouteNavItem className="headerLinks" eventKey={3} href="/about">About</RouteNavItem> 
      <RouteNavItem className="headerLinks" eventKey={4} href="/cart">Cart</RouteNavItem> 
     </Nav> 
    </Navbar.Collapse> 
</Navbar> 
<Button id="loginBtn" onClick={this.open}>Login</Button>

RouteNavItem是自定义组件我写的，但它没有任何与登录按钮的功能。

**** ****编辑

这是我多么希望自己的网站看的标题图片的链接... https://s3.amazonaws.com/tylermayberry/Screen+Shot+2017-10-09+at+3.17.34+PM.png

来源

2017-10-04 jtylerm

里面的一切<Navbar.Collapse/>组件是怎么回事在汉堡菜单内。

所以你需要添加按钮的倒塌组件内部是这样的：

<Navbar.Collapse> 
    <Nav pullRight> 
     <RouteNavItem className="headerLinks" eventKey={1} href="/">Home</RouteNavItem> 
     <RouteNavItem className="headerLinks" eventKey={2} href="/shop">Shop</RouteNavItem> 
     <RouteNavItem className="headerLinks" eventKey={3} href="/about">About</RouteNavItem> 
     <RouteNavItem className="headerLinks" eventKey={4} href="/cart">Cart</RouteNavItem> 
    </Nav> 
    <Navbar.Form pullRight> 
     <Button bsStyle="primary">Login</Button> 
    </Navbar.Form> 
</Navbar.Collapse>

注意：在使用Navbar.Form正确对齐

来源

2017-10-07 00:10:13 Jalissa

登录按钮停留在导航栏的左边，即使它是在Nav及其RouteNavItem子级后指定。我怎样才能让登录按钮位于链接的右侧？ – jtylerm

@jtylerm尝试在'登录'按钮上添加'className ='pull-right'' – Jalissa

它仍然停留在左边 – jtylerm

如何获取React-Bootstrap导航栏中的按钮？

回答

相关问题