Question

<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>

我希望第一个项目在初始时处于活动状态，但是活动状态没有做任何事情，有人知道为什么

Answer 1

您还要在第一个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放在那里，以显示如何使用特定值绑定点击处理程序（即0表示中性 - 不突出显示）。

React-bootstrap Nav activeKey不会将NavItem的状态更改为活动状态

1 个答案: