React 弹出框组件：失去焦点自动关闭

以下是一个基于 React 的简单弹出框组件，可以在失去焦点时自动关闭：

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

function Popup() {
  const [isOpen, setIsOpen] = useState(false);
  const popupRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (popupRef.current && !popupRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [popupRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Open Popup</button>
      {isOpen && (
        <div ref={popupRef}>
          <p>This is a popup!</p>
        </div>
      )}
    </div>
  );
}

export default Popup;

使用useRef创建一个popupRef引用，它将用于检查单击事件是否在popup内。使用useEffect添加一个事件侦听器，以便在单击页面上的其他位置时关闭popup。最后，将popupRef设置为<div>元素的ref属性，以便在单击popup内的元素时不会关闭它。