Reactjs在单击外部或单击人时隐藏div答案

【问题标题】：Reactjs hide div when click outside or click menReactjs在单击外部或单击人时隐藏div
【发布时间】：2022-02-08 06:11:42
【问题描述】：

我正在使用 tailwind css 创建语言切换器组件。

语言选择器工作正常，但在 . 之外单击时无法隐藏语言。

语言切换器有反应组件吗？

我可以知道如何隐藏 div 点击外面。

import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MyanmarFlag, EnglishFlag } from "../assets/icons/svg_icons";

const LanguageSelector = () => {
  const [isOpen, setIsOpen] = useState(false);
  const { t, i18n } = useTranslation();

   const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
   };

  return (
<div className="flex justify-end p-4">
  <div className="relative">
    <button
      className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 
  bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2
   focus:ring-offset-gray-100 focus:ring-primary"
      onClick={() => setIsOpen(!isOpen)}
    >
      Select Language
    </button>
    {isOpen && (
      <div
        className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg 
  bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100
  focus:outline-none z-50"
      >
        <div className="py-1">
          <a
            className="group flex items-center px-4 py-2 text-sm text-gray-700
        hover:bg-primary hover:text-white"
            onClick={() => changeLanguage("my")}
          >
            <MyanmarFlag
              className="mr-3 h-5 w-5 text-gray-400 group-hover:text-white"
              aria-hidden="true"
            ></MyanmarFlag>
            Myanmar
          </a>
        </div>
        <div className="py-1">
          <a
            className="group flex items-center px-4 py-2 text-sm text-gray-700
        hover:bg-primary hover:text-white"
            onClick={() => changeLanguage("en")}
          >
            <EnglishFlag
              className="mr-3 h-5 w-5 text-gray-400 group-hover:text-white"
              aria-hidden="true"
            ></EnglishFlag>
            English
          </a>
        </div>
      </div>
    )}
  </div>
</div>
);
};

export default LanguageSelector;

【问题讨论】：

标签： reactjs tailwind-css react-i18next

【解决方案1】：

您可以使用 useRef 挂钩并将事件侦听器绑定到您的 div，然后更改您的 isOpen 状态。

见Detect click outside React component

【讨论】：

感谢您的回答。这确实是我需要的。