How do you make the menu collapse after item is selected?
I dont know how to make it work on fiddle, but this is what I would do? https://jsfiddle.net/vjeux/kb3gN/
import React from 'react';
import {Navbar, Nav, NavItem, NavDropdown, DropdownButton, MenuItem, CollapsibleNav} from 'react-bootstrap';
export default class App extends React.Component {
constructor(props) {
super(props);
this.onSelect = this.onSelect.bind(this);
this.toggleNav = this.toggleNav.bind(this);
// this.state = {navExpanded: false};
}
onSelect(e){
console.log('OnSelect')
// console.log(this.state.navExpanded);
// this.setState({navExpanded: false});
}
toggleNav(){console.log('toggle...')};
// <Navbar inverse fixedTop toggleNavKey={0} navExpanded={this.state.navExpanded} onToggle={() => this.toggleNav()}>
// <Navbar inverse fixedTop toggleNavKey={0} navExpanded={this.state.navExpanded} >
render() {
return (
<Navbar inverse fixedTop toggleNavKey={0} >
<Nav right eventKey={0} onSelect={this.onSelect} > {/* This is the eventKey referenced */}
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
</Nav>
</Navbar>
)
}
componentDidMount() {
}
}
React.render(<App />, document.getElementById('example'));
i have found the solution from this link https://github.com/react-bootstrap/react-bootstrap/issues/1301
i will put sample code of the link above here
const Menu = React.createClass ({
getInitialState () {
return {
navExpanded: false
}
},
setNavExpanded(expanded) {
this.setState({ navExpanded: expanded });
},
closeNav() {
this.setState({ navExpanded: false });
},
render() {
return (
<div>
<Navbar onToggle={this.setNavExpanded}
expanded={this.state.navExpanded}>
<Navbar.Header>
<Navbar.Brand>
<Link to="some url">Main</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav onSelect={this.closeNav}>
{ this.renderMenuItem() }
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}