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

Posted 2023-02-22

【中文标题】如何在 NextJs 中使用 useState Hook 进行多个下拉菜单？

【英文标题】：How to use useState Hook in NextJs for multiple dropdown menu?

【发布时间】：2021-10-27 14:35:07

【问题描述】：

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

Output

【问题讨论】：

您的所有菜单类别是否只有一个 isActive 标志？

是的@Danila，我只有 isActive 标志用于所有其他菜单类别。

【参考方案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查看子元素

【参考方案2】：

按照这个comment，

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

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);