react中下拉，点击其他地方隐藏下拉的功能实现

在工作中很多时候我们都是用组件来实现业务，搞过来的下拉组件直接用就是了，但是有些情况，UI大大要求我们写个比较花里胡哨的下拉，那么，就要使出自己的真本事了。 今天恰好做了这个功能，顺便写一下笔记吧，避免以后遇到类似功能不会做。不会做我就直接来考。哈哈哈 好记性不如烂笔头。。。

const [status, setStatus] = useState(false)
const clickShow = () => {
    setStatus(false) //点击其他地方关闭
}

useEffect(() => {
    if (status) {
        document.addEventListener('click', clickShow, false)
        return () => {
            document.removeEventListener('click', clickShow, false)
        }
    }
}, [status])
    

<Button type="primary" className="btn-width-140-height-36"
        onClick={() => clickShow()} style={{ position: 'relative' }}
>
    创建 
    {status ? (
        <div
            className="panelBox"
            onClick={(e) => {
                e.nativeEvent.stopImmediatePropagation()
                e.stopPropagation()
                console.log('阻止冒泡')
            }}
        >
            可点击弹框中的内容，需要阻止冒泡
        </div>
    ) : null}
</Button>