我正在尝试创建一个管理面板,其中有一个侧边栏菜单。我创建了一个下拉菜单,它使用 useState 钩子(Hook)工作,但没有按我的意愿工作。我想要的是当我点击 客户所以 if 语句应该只为它的 child 运行,而不是为所有的 sibling 运行。
const [isActive, setIsActive] = useState(false);
const handleToggle = () => {
setIsActive(!isActive)
}
下面是下拉代码。<li>
<a className={`${isActive?'open-sibling':'hidden-sibling'} left-menu-list`} onClick={handleToggle}>
<i className="las la-user-alt mr-2"></i>
<span>Clients</span>
<i className="las la-angle-up ml-auto"></i>
</a>
<ul>
<Link href="/clients/list">
<li>
<a className="left-menu-list">
<i className="las la-users mr-2"></i> View All Clients
</a>
</li>
</Link>
</ul>
</li>
请找到输出的 GIF:-Output
最佳答案
给你一个解决方案
const [isActive, setIsActive] = useState({
status: false,
key: ""
});
const handleToggle = (key) => {
if(isActive.key === key) {
setIsActive({
status: false,
key: ""
});
} else {
setIsActive({
status: true,
key
});
}
}
<li>
<a className={`${isActive.key == 'client' ? 'open-sibling':'hidden-sibling'} left-menu-list`} onClick={() => handleToggle("client")}>
<i className="las la-user-alt mr-2"></i>
<span>Clients</span>
<i className="las la-angle-up ml-auto"></i>
</a>
<ul>
<Link href="/clients/list">
<li>
<a className="left-menu-list">
<i className="las la-users mr-2"></i> View All Clients
</a>
</li>
</Link>
</ul>
</li>
请使用
status
和 key
查看子元素
关于javascript - 如何在 NextJs 中使用 useState Hook 进行多个下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68957039/