无头 UI - 弹出窗口 - 菜单项状态

Question

我正在尝试从https://headlessui.dev/react/popover实现 Popover ，但我不太清楚如何在单击菜单项时关闭菜单。

我正在使用 NextJS 和 Link，这就是我看到的行为。当我只使用 < a > 标签时，它会重新加载页面，并且菜单在重新加载时关闭，但我想利用 NextJS 的链接。

这是我的头文件，没有类名的简化：

import React, { Fragment, useState } from "react";
import { Popover, Transition } from "@headlessui/react";
import Link from "next/link";

export default function Header() {
  const [navbar, setNavbar] = useState(false);

  const changeNavbar = () => {
    if (window.scrollY >= 80) {
      setNavbar(true);
    } else {
      setNavbar(false);
    }
  };

  React.useEffect(() => {
    window.addEventListener("scroll", changeNavbar);
  }, []);

  return (
    <Wrapper>
      <div>
        <Popover>
          {({ open }) => (
            <>
              <div>
                <div>
                  <div>
                    <span>Name</span>
                    <Link href="/">
                      <img
                        src="/images/logos/logo_blue.png"
                        alt=""
                      />
                    </Link>
                  </div>
                  <div>
                    <Popover.Button>
                      <span>Open menu</span>
                      <MenuIcon aria-hidden="true" />
                    </Popover.Button>
                  </div>
                  <Popover.Group as="nav">
                    {main.map((item) => (
                      <Link href={item.href} key={item.name}>
                        <a key={item.name}>
                          {item.name}
                        </a>
                      </Link>
                    ))}

                    <Popover>
                      {({ open }) => (
                        <>
                          <Popover.Button>
                            <span>More</span>
                            <ChevronDownIcon
                              aria-hidden="true"
                            />
                          </Popover.Button>

                          <Transition
                            show={open}
                            as={Fragment}
                            enter="transition ease-out duration-200"
                            enterFrom="opacity-0 translate-y-1"
                            enterTo="opacity-100 translate-y-0"
                            leave="transition ease-in duration-150"
                            leaveFrom="opacity-100 translate-y-0"
                            leaveTo="opacity-0 translate-y-1"
                          >
                            <Popover.Panel
                              static>
                              <div>
                                <div>
                                  {resources.map((item) => (
                                    <a
                                      key={item.name}
                                      href={item.href}
                                      >
                                      <item.icon
                                        aria-hidden="true"
                                      />
                                      <div>
                                        <p>
                                          {item.name}
                                        </p>
                                        <p>
                                          {item.description}
                                        </p>
                                      </div>
                                    </a>
                                  ))}
                                </div>
                               </div>
                            </Popover.Panel>
                          </Transition>
                        </>
                      )}
                    </Popover>
                  </Popover.Group>
                  <div>
                    <a
                      href="/login">
                      Sign in
                    </a>
                    <a
                      href="/login"
                    >
                      Sign up
                    </a>
                  </div>
                </div>
              </div>

              <Transition
                show={open}
                as={Fragment}
                enter="duration-200 ease-out"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="duration-100 ease-in"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Popover.Panel
                  focus
                  static
                 >
                  <div>
                    <div>
                      <div>
                        <Link href="/">
                          <img
                            src="/images/logos/logo_blue.png"
                            alt="Workflow"
                          />
                        </Link>
                        <div className="-mr-2">
                          <Popover.Button>
                            <span >Close menu</span>
                            <XIcon aria-hidden="true" />
                          </Popover.Button>
                        </div>
                      </div>
                      <div>
                        <nav>
                          {main.map((item) => (
                            <a
                              key={item.name}
                              href={item.href}
                            >
                              <item.icon
                                aria-hidden="true"
                              />
                              <span>
                                {item.name}
                              </span>
                            </a>
                          ))}
                        </nav>
                      </div>
                    </div>
                    <div>
                      <div>
                        {resources.map((item) => (
                          <a
                            key={item.name}
                            href={item.href}
                          >
                            {item.name}
                          </a>
                        ))}
                      </div>
                      <div>
                        <a
                          href="/login"
                        >
                          Sign up
                        </a>

                        <p>
                          Existing customer?{" "}
                          <a href="/login">
                            Sign in
                          </a>
                        </p>
                      </div>
                    </div>
                  </div>
                </Popover.Panel>
              </Transition>
            </>
          )}
        </Popover>
      </div>
    </Wrapper>
  );
}

Answer 1

我在学校的 ReactJS 项目中使用 TailwindCSS 和 HeadlessUI，我也想知道同样的事情。

我的解决方案是将弹出窗口面板项包装在 Popover.Button 中，并调用一个函数，将弹出窗口自己的“打开”设置为 false，结果菜单将关闭。

我只从你的代码中选取 1 个示例：

{main.map((item) => (

    <Popover.Button onClick={() => (open = false)}>

       <Link href={item.href} key={item.name}>
         <a key={item.name}>
           {item.name}
         </a>
       </Link>

     <Popover.Button>

我希望这能帮助解决你的问题，就像它为我做的一样:)