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

【问题标题】：Prevent the button click again once the dropdown menu has opened from the button React.js?从 React.js 按钮打开下拉菜单后，防止按钮再次单击？
【发布时间】：2022-01-18 06:55:09
【问题描述】：

从单击按钮开始启用下拉菜单后，我正在尝试阻止该按钮再次单击。按钮点击 -> 打开下拉菜单。菜单可以关闭的唯一方法是从外部单击，而不是从按钮，即从 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;

【问题讨论】：

我在按钮中添加了 disabled={showMenu} ，它可以防止在菜单打开后单击按钮，唯一的问题是如果我想向按钮添加文本和图标它仍然被点击
我解决了购买在退货下方添加<div ref={ref} className="flex justify-center items-center relative mt-20"> 并在按钮中添加disabled={showMenu}，这花了我很多天的时间来解决；）

标签： javascript reactjs react-hooks tailwind-css togglebutton

【解决方案1】：

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

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

【讨论】：

谢谢，这是一个正确的答案，但它与外部点击冲突。