React、Tailwind 中的切换按钮

Question

我有一个移动菜单和其中的几个链接，当我单击链接时，会显示一个包含内容的模式窗口，我希望模式窗口上的后退箭头按钮将我带回移动菜单。我怎样才能实现这个目标？ 我尝试创建一个按钮 onClick={toggleMobileMenu}，但它不起作用。

Answer 1

为了做到这一点，您必须将 2 个状态 专用于您的应用程序。其中一个用于汉堡菜单，另一个用于模态菜单。假设我有 2 个，一个用于桌面菜单，另一个用于移动菜单。

我只讨论移动设备，因为它与问题相关：

function App() {
  // state for showing mobile menu
  const [mobileMunu, setMobileMenu] = useState(false);
  const [modal, setModal] = useState(false);

  // State handlers (Toggle)
  function handleToggleModal() {
    setModal(!modal);
  }
  function handleToggleBurger() {
    setMobileMenu(!mobileMunu);
  }

  return (
    <>
      <header className="">
        <MobileMenu
          burgerHandler={handleToggleBurger}
          modalHandler={handleToggleModal}
          isOpen={mobileMunu}
        />
        <DesktopMenu />
      </header>
      {modal && <Modal handler={handleToggleModal} />}
    </>
  );
}

我在顶部定义了两个状态处理程序来处理汉堡和模式的切换。 另外，正如您所看到的，我将汉堡状态和两个处理程序传递给了我的 MobileMenu 组件。

#记住，我将模态组件放置在 body 中，而不是放在任何其他标签内。我将处理函数作为 prop 传递给它

现在在里面

MobileMenu

我有一些简单的东西：

// Mobile menu component
function MobileMenu({ burgerHandler, modalHandler, isOpen }) {
  return (
    <section className="block lg:hidden">
      {isOpen ? (
        <button className="" onClick={() => burgerHandler()}>
          {/* close icon */}
          <svg
            className="w-6 h-6 text-gray-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >...</svg>
        </button>
      ) : (
        <button className="" onClick={() => burgerHandler()}>
          {/* burger icon */}
          <svg
            className="w-6 h-6 text-gray-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >...</svg>
        </button>
      )}
      {isOpen && (
        <nav className="absolute flex flex-col gap-5 bg-slate-300 size-full justify-center items-center">
          <a href="#">Home</a>
          <a href="#">About</a>
          <button onClick={() => modalHandler()}>Service</button>
          <a href="#">Contact</a>
        </nav>
      )}
    </section>
  );
}

对于关闭按钮，我将

onClick

设置为与汉堡关联的处理程序，并在我的 nav 标签内，将 Service 放在 Button 标签内，并将

onClick

设置为与模态关联的句柄。

另外，对于

Modal

，我创建了一些简单的东西：

// modal component
function Modal({ handler }) {
  return (
    <section className="absolute inset-0 size-full flex items-center justify-center bg-gray-200 bg-opacity-80">
      <div className="w-1/2 h-1/2 bg-white relative p-5">
        <button className="absolute top-2 left-2" onClick={() => handler()}>
          {/* back arrow svg*/}
          <svg
            className="w-4 h-4 text-gray-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >...</svg>
        </button>
        <h1 className="text-2xl font-bold text-center">Service</h1>
        <p className="text-gray-500 text-center">
          ...
        </p>
      </div>
    </section>
  );
}

在其中，我创建了一个按钮，并将

onClick

设置为其处理程序。

所以它所做的只是在移动菜单仍然打开的情况下关闭模式！