我已经建立了带有图标的侧面菜单,点击每个图标后,菜单会滑出,上面会显示相应的项目。使用
const handleCloseWhenOpen = menuOpen ? { onClick: this.closeMenu } : null;
然后放
{...handleCloseWhenOpen}
作为道具...这样就可以了,当我点击icon1菜单打开并再次点击icon1时,菜单关闭。如果我点击icon1,菜单打开然后点击icon2,而不是仅仅切换菜单数据,菜单关闭,我必须再次点击icon2以获取菜单,其中包含icon2的数据。我只想在单击打开它的相同图标时再次单击菜单关闭。
任何帮助都会很棒。
export default class SidebarNav extends Component {
static propTypes = {
children: PropTypes.any,
};
constructor() {
super();
this.state = {
menuOpen: false,
sideBarItems: new List(),
isSelected: false,
};
}
openMenu = (value) => {
let menuData = [];
switch (value) {
case 'icon1':
menuData = Data.icon1Data;
break;
case 'icon2':
menuData = Data.icon2Data;
}
this.setState({
menuOpen: true,
sideBarItems: menuData,
selectedIcon: value,
});
}
closeMenu = (value) => {
this.setState({
menuOpen: false,
selectedIcon: value,
});
}
render() {
const {
menuOpen,
sideBarItems,
selectedIcon,
} = this.state;
const { children } = this.props;
const handleCloseWhenOpen = menuOpen ? { onClick: this.closeMenu } : null;
return (
<PageWrapper>
<SideNav
onClick={this.openMenu}
selectedIcon={selectedIcon}
/>
<PageContentWrapper>
<Sidebar.Pushable as={Segment}>
<PushMenu
visible={menuOpen}
sideBarItems={sideBarItems}
{...handleCloseWhenOpen}
/>
<Sidebar.Pusher {...handleCloseWhenOpen}>
{children}
</Sidebar.Pusher>
</Sidebar.Pushable>
</PageContentWrapper>
</PageWrapper>
);
}
}
export default class SideNav extends Component {
static propTypes = {
onClick: PropTypes.func,
selectedIcon: PropTypes.any,
}
render() {
const {
onClick,
selectedIcon,
} = this.props;
return (
<SideBarDiv>
<IconList>
{
Data.icon1Data.map((item, itemIndex) => {
return (
<IconWrapper
key={itemIndex}
className={
selectedIcon === item.get('value')
? 'Icon-pressed-shadow'
: 'Icon-right-shadow'
}
onClick={() => onClick(item.get('value'))}
>
<ListItem>
<Icon name={item.get('name')} />
</ListItem>
</IconWrapper>
);
})
}
{
Data.icon2Data.map((item, itemIndex) => {
return (
<IconWrapper
key={itemIndex}
className={
selectedIcon === item.get('value')
? 'Icon-pressed-shadow'
: 'Icon-right-shadow'
}
onClick={() => onClick(item.get('value'))}
>
<ListItem>
<Icon name={item.get('name')} />
<NotificationLabel>3</NotificationLabel>
</ListItem>
</IconWrapper>
);
})
}
</IconList>
</SideBarDiv>
);
}
}
export default class PushMenu extends Component {
constructor() {
super();
this.state = {
visible: false,
};
}
static propTypes = {
visible: PropTypes.bool,
sideBarItems: PropTypes.instanceOf(Immutable.List),
}
render() {
const {
sideBarItems,
visible,
} = this.props;
return (
<Sidebar
className='Push-menu'
animation='push'
width='thin'
visible={visible}
>
<div>
{
sideBarItems ? sideBarItems.map((menuTitle, menuTitleIndex) => {
return (
<div key={menuTitleIndex}>
<Header>{menuTitle.get('title')}</Header>
<Linebreak />
</div>
);
})
: <Header>Content</Header>
}
</div>
<List>
{
sideBarItems ? sideBarItems.map((menuItem, menuItemindex) => {
return (
<li key={menuItemindex}>
{
!!menuItem.get('childItems') &&
menuItem.get('childItems').map((childItem) => {
return (
<div key={childItem.get('name')}>
<ListItemHeader>{childItem.get('name')}</ListItemHeader>
<List>
{
childItem.get('nestedItems').map((nestedItem) => {
return (
<ListLink key={nestedItem.get('name')}>
<Link
activeStyle={{ fontWeight: 'bold' }}
to={nestedItem.get('route')}
>
<li>{nestedItem.get('name')}</li>
</Link>
</ListLink>
);
})
}
</List>
</div>
);
})
}
</li>
);
})
: null
}
</List>
</Sidebar>
);
}
}
答案 0 :(得分:1)
SidebarNav
中的状态有一个字段menuOpen
,用于跟踪任何菜单是否已打开。这是您在运行handleCloseWhenOpen
时检查的内容。
因此,当您单击Icon1时,menuOpen
将设置为true。接下来当您单击Icon2 menuOpen
时,选中它并将其设置为true并切换为false。因此,单击Icon2将关闭Icon1的菜单,而不是打开Icon2的菜单。
要纠正此行为,您需要分别跟踪每个图标菜单的状态。因此,如果您想跟踪SidebarNav
中的状态,您可以在状态对象中为每个图标添加一个字段,例如
this.state={
.....
menu1Open:false,
menu2Open:false,
.....
}
然后检查您需要切换的字段,具体取决于所点击的图标;并相应地渲染菜单。
如果您认为这会变得复杂,您可以让每个SideNav
跟踪自己的状态,将菜单数据作为道具传递给图标,然后让点击操作切换菜单的开启和关闭。