reactjs 如何在展示 dropdown 的时候主动获取到 focus在dropdown失去focus的时候自动关闭

在 React 中，你可以使用 useState 和 useEffect 钩子来实现 Dropdown 组件的展示和关闭逻辑。

首先，你可以使用 useState 来跟踪 Dropdown 组件是否处于展示状态。在组件的初始状态下，设置 isDropdownOpen 为 false。

import React, { useState } from 'react';

const Dropdown = () => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  return (
    // Dropdown 的内容
  );
};

接下来，你可以使用 useEffect 来监听页面的点击事件，并在 Dropdown 外部点击时关闭 Dropdown。为了确保 useEffect 只在组件挂载和 isDropdownOpen 发生改变时运行，你可以传递一个空数组作为第二个参数。

import React, { useState, useEffect, useRef } from 'react';

const Dropdown = () => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const dropdownRef = useRef(null);

  useEffect(() => {
    const handleOutsideClick = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsDropdownOpen(false);
      }
    };

    document.addEventListener('click', handleOutsideClick);

    return () => {
      document.removeEventListener('click', handleOutsideClick);
    };
  }, [isDropdownOpen]);

  return (
    <div ref={dropdownRef}>
      {/* Dropdown 的内容 */}
    </div>
  );
};

在这个例子中，我们使用了 useRef 来创建一个 dropdownRef 引用，它将被用来判断点击事件是否发生在 Dropdown 外部。

然后，我们定义了一个名为 handleOutsideClick 的函数，它在点击事件发生时检查点击的目标元素是否在 Dropdown 内部。如果不是，则关闭 Dropdown。

最后，我们在 useEffect 中添加了事件监听器，监听整个文档的点击事件。在组件卸载时，我们使用 return 语句从 useEffect 中清除事件监听器。

现在，当 Dropdown 组件展示时，它将监听整个文档的点击事件。如果点击事件发生在 Dropdown 外部，Dropdown 将关闭。

你可以根据自己的需求，将上述代码添加到你的项目中，并根据实际情况进行调整