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

要在React中实现在展示下拉菜单时获取焦点并在下拉菜单失去焦点时自动关闭，你可以使用useState来管理下拉菜单的状态，并使用useEffect来监听焦点变化。

首先，在函数组件中使用useState来创建一个状态变量来管理下拉菜单的显示/隐藏状态：

import React, { useState } from 'react';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && (
        <div onBlur={() => setIsOpen(false)}>
          {/* 下拉菜单内容 */}
        </div>
      )}
    </div>
  );
}

export default Dropdown;

在上面的代码中，我们使用isOpen状态来控制下拉菜单的显示/隐藏，并通过setIsOpen函数来更新状态。

当点击按钮时，我们通过setIsOpen(!isOpen)切换下拉菜单的显示/隐藏状态。

接下来，在下拉菜单的div元素上添加一个onBlur事件处理程序，当下拉菜单失去焦点时，我们将isOpen状态设置为false来自动关闭下拉菜单。

请注意，我们只在下拉菜单的div元素上添加了onBlur事件处理程序，而不是整个组件，这是为了避免在点击下拉菜单的选项时立即关闭下拉菜单。只有在点击其他地方时，下拉菜单才会失去焦点。

希望对你有帮助