如何使用useState钩子在NextJs多个下拉菜单?

Question

我正在尝试创建一个管理面板，其中我有一个侧边栏菜单。我已经创建了一个下拉菜单，它正在使用useState钩子工作，但不像我想要的那样工作。我想要的是当我点击Clients所以if语句应该只对它的子节点运行，而不是对所有的兄弟节点运行。

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:-

输出

Answer 1

这就是你的解决方案

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来查看子元素

Answer 2

根据这个评论，

如果所有下拉框都使用相同的状态，这是预期的行为。看看是否可以为每个菜单使用单独的状态。如,

const [isClientActive, setIsClientActive] = useState(false);
const [isordersActive, setIsOrdersActive] = useState(false);

const handleClientToggle = () => {
setIsClientActive(!isClientActive)
}

const handleOrdersToggle = () => {
setIsOrdersActive(!isordersActive)
}

或使用对象存储在一个地方

const [isActive, setIsActive] = useState({client: false, order:false});