Javascript 单击同一项可关闭菜单，但单击不同项可保持菜单打开

我已经建立了一个带有图标的侧菜单，单击每个图标后，一个菜单会滑出，上面有相应的项目。利用

const handleCloseWhenOpen = menuOpen ? { onClick: this.closeMenu } : null;

然后把

{...handleCloseWhenOpen}

作为道具…当我点击图标1时，菜单打开，当再次点击图标1时，菜单关闭。如果我单击icon1，菜单将打开，然后单击icon2，而不仅仅是切换菜单数据，菜单将关闭，我必须再次单击icon2，以获取包含icon2数据的菜单。我只想在再次单击打开菜单的图标时关闭菜单

任何帮助都会很棒

导出默认类SidebarNav扩展组件{
静态类型={
孩子们：任何人，
};
构造函数（）{
超级（）；
此.state={
美诺朋：错，
sideBarItems:新列表（），
选：错，
};
}
openMenu=（值）=>{
设menuData=[]；
开关（值）{
案例“icon1”：
menuData=Data.icon1Data；
打破
案例“icon2”：
menuData=Data.icon2Data；
}
这是我的国家({
梅诺潘：没错，
sideBarItems:menuData，
selectedIcon:value，
});
}
关闭菜单=（值）=>{
这是我的国家({
美诺朋：错，
selectedIcon:value，
});
}
render（）{
常数{
梅诺潘，
铁钡盐，
选择法令，
}=本州；
const{children}=this.props；
const handleCloseWhenOpen=menuOpen？{onClick:this.closeMenu}:null；
返回(
{儿童}
);
}
}

侧栏AV中的状态有一个字段

菜单打开

，用于跟踪任何菜单是否打开。这是当您的跑步

handleCloseWhenOpen

时检查的内容。 因此，当您单击Icon1时，

menuOpen

设置为true。下一步，当您单击图标2

menuOpen

时，将选中并发现其为true，并将其切换为false。因此，单击Icon2将关闭Icon1的菜单，而不是打开Icon2的菜单

要纠正此行为，需要分别跟踪每个图标菜单的状态。因此，如果您想在

SidebarNav

中跟踪状态，可以在state对象中为每个图标设置一个字段，例如

this.state={
    .....
    menu1Open:false,
    menu2Open:false,
    .....
}

然后根据单击的图标检查需要切换的字段；并相应地呈现菜单

---

如果您认为这会变得复杂，您可以让每个

SideNav

跟踪自己的状态，将菜单数据作为道具传递给图标，并让单击操作切换菜单的打开和关闭。

您所说的“每个图标的字段”是什么意思？像道具一样？这很有道理。非常感谢。这就是答案。我很感激。如果我认为它会变得一团糟，我认为会，因为有12个图标/菜单…第二个选择是让SideNav跟踪它自己的状态。所以我只是在SideNav组件中做构造器，对吗？我已经编辑了原始帖子以包含PushMenu组件。