Search code examples
reactjsreact-bootstrap

react-bootstrap how to collapse menu when item is selected


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

Solution

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