React-Bootstrap-Nav activeKey nicht den Status des NavItem ändern, um aktiv

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> 

ich das erste Element aktiv sein soll, wenn es Anfangs ist, aber der aktive tat nichts, wissen, jemand, warum

Answer 1

Sie sind überschreiben Sie Ihren activeKey-Wert, indem Sie auch "active" auf Ihrem ersten NavItem angeben.

Wenn Sie "activeKey = {1}" effektiv setzen, erreichen Sie, wonach Sie fragen. Das bedeutet aber auch, dass du deine Requisite auf 1 festlegst, also wird sie sich nie ändern.

Wahrscheinlich, was Sie wirklich wollen, ist etwas, einschließlich der lokalen Zustand, das heißt:

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> 
); 
} 
}); 

ich die navbrand legte auch dort, um zu zeigen, wie Sie die Click-Handler mit einem bestimmten Wert .bind (dh 0 bedeutet neutral - keine Hervorhebung).