reactjs sidemenu功能
问题描述:
我有一个固定的图标导航到不同的页面的侧栏。当点击图标时,二级菜单滑出。目前,当点击一个图标时,菜单会滑出,但是当选择另一个图标时,菜单将滑回,而不仅仅是切换或停留。同时点击边栏和菜单不会关闭滑动菜单。我不知道如何让这个工作。任何建议,将不胜感激。reactjs sidemenu功能
家长:
export default class Parent extends Component {
constructor() {
super();
this.state = {
menuOpen: false,
};
}
toggleMenuOpen =() => {
this.setState({ menuOpen: !this.state.menuOpen });
}
render() {
return (
<div>
<ul>
<NavIcons onClick={this.toggleMenuOpen} />
<PushMenu menuOpen={this.state.menuOpen} />
</ul>
</div>
);
}
}
图标上栏:
export default class NavIcons extends Component {
render() {
const { onClick } = this.props;
return (
<div>
{
topNavListItems.map((topItem) => {
return (
<li className='link-wrapper' key={topItem.get('id')} onClick={onClick}>
<NavLink
activeClassName='selected'
className='Icon-list-link'
to={topItem.get('route')}
>
<Icon name={topItem.get('name')} />
</NavLink>
</li>
);
})
}
</div>
);
}
}
NavIcons.propTypes = {
onClick: PropTypes.func,
};
滑出菜单:
export default class PushMenu extends Component {
render() {
const { menuOpen } = this.props;
const menuClass = menuOpen ? 'menu open' : 'menu';
return (
<div className={menuClass}>
<Header>Content</Header>
<Linebreak />
<List>
{
labelMenuItems.map((menuItem) => {
return (
<li key={menuItem.get('id')}>{menuItem.get('name')}
<List>
{
menuItem.get('nestedItems').map((childMenuItem) => {
return (
<li key={childMenuItem.get('id')}>{childMenuItem.get('name')}</li>
);
})
}
</List>
</li>
);
})
}
</List>
</div>
);
}
}
PushMenu.propTypes = {
menuOpen: PropTypes.bool,
};
答
不是有一个单一的toggleMenuOpen
处理程序,创建openMenu
和closeMenu
处理
openMenu =() => {
this.setState(prevState => {
if (!prevState.menuOpen) {
return { menuOpen: true };
}
return {};
})
}
closeMenu =() => {
this.setState(prevState => {
if (prevState.menuOpen) {
return { menuOpen: false };
}
return {};
})
}
然后可以使用openMenu
作为onClick
处理您的*导航li
项目
如果你有访问Parent
组件中的主要内容,您还可以处理外部的关闭点击(如果没有,您需要提起menuOpen
状态,你可以在哪里)。使用closeMenu
作为“外部”内容上的点击处理程序 - 不管是否在滑出菜单中。您希望确保只在菜单打开时设置该处理程序。有很多方法可以做到这一点,但这是一个:
render() {
const handleCloseWhenOpen = this.state.menuOpen ? { onClick: this.closeMenu } : {};
return (
<div>
<ul>
<NavIcons onClick={this.toggleMenuOpen} />
<PushMenu menuOpen={this.state.menuOpen} />
</ul>
<MainContent {...handleCloseWhenOpen} />
</div>
);
}
+0
这工作。谢谢! – StuffedPoblano
请包括你提到在你的代码,以便我们可以测试并为您找到一个解决方案的其他组件。 –