点击弹出框外部隐藏弹出框的方案

用点击事件可以控制弹出框隐藏，但是react自己有一套事件处理机制，与普通事件处理不同，有人建议两种事件处理方案只使用一种。看到一种用普通事件处理来做 “点击弹出框外部隐藏弹出框” 的方案，觉得不错分享给大家（· ·）

React Hooks方法（16.8 +）
您可以创建一个名为的可重用挂钩useComponentVisible。

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

export default function useComponentVisible(initialIsVisible) {
    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
    const ref = useRef(null);

    const handleClickOutside = (event) => {
        if (ref.current && !ref.current.contains(event.target)) {
            setIsComponentVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('click', handleClickOutside, true);
        };
    });

    return { ref, isComponentVisible, setIsComponentVisible };
}
然后，您希望在组件中添加功能以执行以下操作：

const DropDown = () => {
    const { ref, isComponentVisible } = useComponentVisible(true);
    return (
       <div ref={ref}>
          {isComponentVisible && (<p>Dropdown Component</p>)}
       </div>
    );

}