2021-06-30

react自定义组件下拉框收起\展开hooks

import React, { useEffect, useState } from 'react';
// 自定义hook是是否聚焦，对于antd组件无效，影响window.onclick，阻止⌚️冒泡存在问题。 需要在不想关闭的子组件，阻止事件冒泡
function useOnBlur () {

    const [focus, set_focus] = useState(false);

    const [open, set_open] = useState(false);

    function onClick (e: any) {
        console.log('click', focus)
        if (focus) {
            e.preventDefault(); 
            e.stopPropagation(); 
        }
        set_open(bool => !bool); 
        set_focus(true)
    }

    function removeWindowClick () {
        window.onclick = (e: any) => {
            window.onclick = null;
            set_focus(false);
            open && set_open(false);
        }
    }

    //挂载/卸载监听事件
    useEffect(() => {
        if (!focus) {
            // window.onclick = null
        } else {
            console.log('激活window监听click事件')
            removeWindowClick();
        }
    }, [focus])

    return {
        focus,
        open,
        onClick
    }
}

export default useOnBlur;