当下拉菜单从按钮React.js打开后，防止再次单击按钮？

Question

当按钮被单击时，当下拉菜单被启用时，我试图阻止该按钮再次单击。单击->按钮将打开下拉菜单。关闭菜单的唯一方法是从外部单击，而不是从按钮，即从useOnClickOutside "usehooks-ts“中关闭。只有当菜单关闭时，该按钮才能单击并打开菜单。如果有人能帮忙解决这个问题，请提前感谢。

https://codesandbox.io/s/funny-wilson-4wbj0?file=/src/App.js (这里是沙箱，但尾风npm并没有在它上工作)。

import React, { useRef, useState } from "react";
import { useOnClickOutside } from "usehooks-ts";

export const DropDownMenu = () => {
  const ref = useRef(null);
  const [showMenu, setShowMenu] = useState(false);
  const handleClick = () => setShowMenu(!showMenu);

  const handleClickOutside = () => setShowMenu(false);

  useOnClickOutside(ref, handleClickOutside);

  return (
    <div className="mt-20">
      <button
        onClick={handleClick}
        className="bg-yellow-300 ml-5 text-sm2 
        border-solid border-2 border-blue-300"
      >
        <div>Open Menu</div>
      </button>
      <div
        ref={ref}
        className={`absolute top-8  w-240 opacity-0 bg-red-200 ml-20 
          ${showMenu ? "opacity-100 visible" : ""}`}
      >
        <ul>
          <li className="">Menu Item One</li>
          <li className="">Menu Item Two</li>
          <li className="">Menu Item Three</li>
        </ul>
      </div>
    </div>
  );
};

export default DropDownMenu;

Answer 1

在handleClick中添加条件，以检查showMenu是否为false，然后继续进行：

const handleClick = () => !showMenu && setShowMenu(!showMenu);

Answer 2

别想太多了。只需将ref放在按钮和下拉列表的父组件上，这样它就不会检测到子组件:)

import React, { useRef, useState } from "react";
import { useOnClickOutside } from "usehooks-ts";

export const DropDownMenu = () => {
  const ref = useRef(null);
  const [showMenu, setShowMenu] = useState(false);
  const handleClick = () => setShowMenu(!showMenu);

  const handleClickOutside = () => setShowMenu(false);

  useOnClickOutside(ref, handleClickOutside);

  return (
    <div className="mt-20" ref={ref}> // Place ref here
      <button
        onClick={handleClick}
        className="bg-yellow-300 ml-5 text-sm2 
        border-solid border-2 border-blue-300"
      >
        <div>Open Menu</div>
      </button>
      <div
        className={`absolute top-8  w-240 opacity-0 bg-red-200 ml-20 
          ${showMenu ? "opacity-100 visible" : ""}`}
      >
        <ul>
          <li className="">Menu Item One</li>
          <li className="">Menu Item Two</li>
          <li className="">Menu Item Three</li>
        </ul>
      </div>
    </div>
  );
};

export default DropDownMenu;