React-bootstrap导航activeKey不会将导航项目的状态更改为活动
React-bootstrap导航activeKey不会将导航项目的状态更改为活动
提问于 2016-06-01 09:49:51
<Nav pullRight activeKey={1}>
<NavItem eventKey={1} href="#" active>技术秘籍</NavItem>
<NavItem eventKey={2}>生活点滴</NavItem>
<NavItem eventKey={3} href="#">休闲娱乐</NavItem>
<NavItem eventKey={4} href="#">沟通交流</NavItem>
<NavItem eventKey={5} href="#">关于博主</NavItem>
</Nav>我希望第一个项目在初始时是活动的，但活动项目没有做任何事情，有人知道为什么吗
回答 1
Stack Overflow用户
发布于 2016-06-02 21:27:37
您还通过在第一个NavItem上指定"active“来覆盖您的activeKey值。
有效地设置"activeKey={1}“可以达到您所要求的效果。然而，这也意味着你正在将你的道具硬连接到1，所以它永远不会改变。
也许你真正想要的是包含本地状态的东西，例如：
const Navigation = React.createClass({
getInitialState() {
return {activeKey: 1};
},
handleSelect(selectedKey) {
this.setState({activeKey: selectedKey});
},
render() {
return (
<Navbar fixedTop>
<Navbar.Header>
<Navbar.Brand>
<a className="page-scroll" href="#page-top" onClick={this.handleSelect.bind(null, 0)}>Some Brand</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav bsStyle="pills" activeKey={this.state.activeKey} onSelect={this.handleSelect}>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavItem eventKey={3} href="#">Link</NavItem>
<NavItem eventKey={4} href="#">Link</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
});我还在其中放置了navbrand，以显示如何使用特定值来.bind单击处理程序(例如，0表示中立-不突出显示)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37558202
复制相关文章
相似问题
腾讯云开发者
