reactjs 如何在展示 dropdown 的时候主动获取到 focus在dropdown失去focus的时候自动关闭如果有两个dropdown时如何避免在a的dropdown展示的时候点击b按钮并没有关闭a的dropdown同时也展示了b的dropdown

要实现在展示 dropdown 的时候主动获取到 focus，并在 dropdown 失去 focus 的时候自动关闭，可以使用 React 的状态来控制 dropdown 的显示与隐藏。

以下是一个示例代码：

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

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

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

    document.addEventListener('mousedown', handleOutsideClick);

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

  return (
    <div ref={dropdownRef}>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && (
        <div>
          <p>Dropdown content here</p>
        </div>
      )}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Dropdown />
      <Dropdown />
    </div>
  );
};

export default App;

在上面的代码中，Dropdown 组件使用了 useState 来控制 dropdown 的显示与隐藏。当点击按钮时，通过 setIsOpen 方法来切换 isOpen 状态，从而显示或隐藏 dropdown。

使用 useRef 创建了一个引用 dropdownRef，并将其绑定到 dropdown 的外层容器上。通过监听 mousedown 事件，判断点击事件是否发生在 dropdown 以外的区域，如果是，则关闭 dropdown。

在 App 组件中，使用了两个 Dropdown 组件，它们之间是独立的，点击一个 dropdown 时不会影响其他 dropdown 的状态。

这样就可以实现在展示 dropdown 的时候主动获取到 focus，并在 dropdown 失去 focus 的时候自动关闭。同时，点击其他 dropdown 按钮时，会关闭当前显示的 dropdown 并展示新的 dropdown