![如何在选择项目时折叠菜单]( "如何在选择项目时折叠菜单")
本文介绍了react-bootstrap 如何在选择项目时折叠菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何让菜单在项目被选中后折叠起来?
我不知道如何让它在小提琴上工作，但这就是我要做的吗?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 linkhttps://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 如何在选择项目时折叠菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！