javascript - 如何在 NextJs 中使用 useState Hook 进行多个下拉菜单？

Question

我正在尝试创建一个管理面板，其中有一个侧边栏菜单。我创建了一个下拉菜单，它使用 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

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