监听鼠标在div外点击就关闭pop

最新推荐文章于 2025-08-05 17:55:38 发布

原创最新推荐文章于 2025-08-05 17:55:38 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

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

const Pop = ({ isOpen, onClose }) => {
    const popRef = useRef(null);

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (popRef.current && !popRef.current.contains(event.target)) {
                onClose();
            }
        };

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

    return (
        <div ref={popRef} className={`pop ${isOpen ? 'visible' : 'hidden'}`}>
            <p>This is a pop-up.</p>
            <button onClick={onClose}>Close</button>
        </div>
    );
};

const App = () => {
    const [isPopOpen, setIsPopOpen] = useState(false);

    const togglePop = () => {
        setIsPopOpen(!isPopOpen);
    };

    return (
        <div>
            <button onClick={togglePop}>Open Pop</button>
            <Pop isOpen={isPopOpen} onClose={() => setIsPopOpen(false)} />
        </div>
    );
};

export default App;