react-bootstrap 如何在选择项目时折叠菜单 [英] react-bootstrap how to collapse menu when item is selected

问题描述

如何让菜单在项目被选中后折叠起来?

我不知道如何让它在小提琴上工作，但这就是我要做的吗?https://jsfiddle.net/vjeux/kb3gN/

从'react'导入React；从'react-bootstrap'导入{Navbar、Nav、NavItem、NavDropdown、DropdownButton、MenuItem、CollapsibleNav}；导出默认类 App 扩展 React.Component {构造函数(道具){超级(道具)；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} >使成为() {返回 (<Navbar inverse fixedTop toggleNavKey={0} ><Nav right eventKey={0} onSelect={this.onSelect} >{/* 这是引用的 eventKey */}<NavItem eventKey={1} href="#">Link</NavItem><NavItem eventKey={2} href="#">Link</NavItem></导航></导航栏>)}componentDidMount() {}}React.render(, document.getElementById('example'));

解决方案

我从这个链接找到了解决方案https://github.com/react-bootstrap/react-bootstrap/issues/1301

我会把上面链接的示例代码放在这里

const Menu = React.createClass ({getInitialState() {返回 {导航扩展:假}},setNavExpanded(扩展){this.setState({ navExpanded: Expanded });},关闭导航(){this.setState({ navExpanded: false });},使成为() {返回 (<div><Navbar onToggle={this.setNavExpanded}扩展={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() }</导航></Navbar.Collapse></导航栏>

)}

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

这篇关于react-bootstrap 如何在选择项目时折叠菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！