ReactJS 实现 Dropdown 自动获取焦点并关闭：使用 useState 和 useEffect

在 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 将关闭。

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