react-bootstrap如何在選擇項目時摺疊菜單

Question

如何在選擇項目後使菜單摺疊？

我不知道如何使它在小提琴上工作，但這是我會做什麼？ 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')); 

Answer 1

我發現從這個鏈接 https://github.com/react-bootstrap/react-bootstrap/issues/1301

的解決方案，我會把樣本代碼的鏈接上面點擊這裏

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