如何获取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
答
里面的一切<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正确对齐
登录按钮停留在导航栏的左边,即使它是在Nav及其RouteNavItem子级后指定。我怎样才能让登录按钮位于链接的右侧? – jtylerm
@jtylerm尝试在'登录'按钮上添加'className ='pull-right'' – Jalissa
它仍然停留在左边 – jtylerm