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

Question

从单击按钮开始启用下拉菜单后，我试图阻止该按钮再次单击。 按钮点击 -> 打开下拉菜单。 菜单可以关闭的唯一方法是从外部单击，而不是从按钮，即从 useOnClickOutside “usehooks-ts”。 如果菜单关闭，按钮应该只能单击并打开菜单。 如果有人可以帮助解决这个问题，请提前感谢。

https://codesandbox.io/s/funny-wilson-4wbj0?file=/src/App.js （这里是沙箱，但是tailwindcss 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 是否为假，然后继续：

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;