React Tailwind 多个无头 UI 下拉菜单（Typescript）

Question

我正在使用多个 Headless UI 下拉菜单。因此，当其中一个下拉菜单处于打开状态并且我尝试单击另一个下拉菜单时，它只会单独关闭当前下拉菜单，而不会打开新的下拉菜单。所以每次在下拉菜单之间切换时我都必须点击两次。

有什么方法可以通过单击新下拉菜单来在下拉菜单之间切换

Answer 1

要实现通过单击在 Headless UI 下拉菜单之间切换所需的行为，您可以在更高级别管理下拉菜单的打开状态。这种方法涉及跟踪当前打开的下拉菜单，并确保打开新的下拉菜单会自动关闭之前打开的下拉菜单。以下是实现此目的的一般方法：

在更高级别管理打开状态：创建一个状态变量来跟踪当前打开的下拉列表。 单击下拉列表时更新状态：单击下拉列表时，将状态更新为新的下拉列表。 关闭之前的下拉菜单：确保单击新的下拉菜单会关闭之前打开的下拉菜单。

这是一个使用 React 的示例实现：

import { useState } from 'react';
import { Menu } from '@headlessui/react';

const Dropdown = ({ id, currentOpenId, setOpenId }) => {
  const isOpen = currentOpenId === id;

  return (
    <Menu>
      <div>
        <Menu.Button onClick={() => setOpenId(isOpen ? null : id)}>
          Options
        </Menu.Button>
      </div>
      {isOpen && (
        <Menu.Items>
          <Menu.Item>
            {({ active }) => (
              <a
                className={`${active ? 'bg-blue-500 text-white' : 'text-black'}`}
                href="/account-settings"
              >
                Account settings
              </a>
            )}
          </Menu.Item>
          <Menu.Item>
            {({ active }) => (
              <a
                className={`${active ? 'bg-blue-500 text-white' : 'text-black'}`}
                href="/logout"
              >
                Logout
              </a>
            )}
          </Menu.Item>
        </Menu.Items>
      )}
    </Menu>
  );
};

const DropdownContainer = () => {
  const [currentOpenId, setCurrentOpenId] = useState(null);

  return (
    <div>
      <Dropdown id="dropdown1" currentOpenId={currentOpenId} setOpenId={setCurrentOpenId} />
      <Dropdown id="dropdown2" currentOpenId={currentOpenId} setOpenId={setCurrentOpenId} />
      <Dropdown id="dropdown3" currentOpenId={currentOpenId} setOpenId={setCurrentOpenId} />
    </div>
  );
};

export default DropdownContainer;

说明 下拉组件：

Dropdown 组件需要三个属性：id、currentOpenId 和 setOpenId。 id 是每个下拉列表的唯一标识符。 currentOpenId 是跟踪当前打开的下拉列表的状态。 setOpenId 是更新currentOpenId 状态的函数。 DropdownContainer 组件：

DropdownContainer 组件维护 currentOpenId 状态。 它呈现多个 Dropdown 组件，每个组件都有一个唯一的 id。 单击 Menu.Button 会更新 currentOpenId 状态。如果单击的下拉列表已打开，则会将 currentOpenId 设置为 null，从而关闭下拉列表。否则，它将 currentOpenId 设置为单击的下拉列表的 id，打开它并关闭任何先前打开的下拉列表。