React中阻止冒泡

原因：在制作一个关于日历组件的时候，遇到一个bug😥,点击input框让日历显示，点击日历以外的区域日历框隐藏。但是无效！且有闪烁bug！

原本的思路是利用获取焦点失去焦点实现，点击input获取焦点显示日历框，失去焦点后再隐藏日历框。

但是! 日历框中有切换月份的按钮，当点击按钮时会失去焦点，又再次触发失去焦点的事件，有闪烁bug。如图：

所以我就给div添加了tabIndex="-1"使div也可以添加获取焦点失去焦点方法。为最外层的div添加click事件获取焦点显示日历盒子，但是当点击日历盒子内部的标签后会依次触发失去焦点，获取焦点事件，形成闪烁(我的显示与隐藏是提前写好的动画类名)；

以上就是我最初尝试的方法一，无效。后来想到可以利用点击html触发隐藏日历盒子的方法

为document添加点击事件，

useEffect(()=>{
    // 点击除去日历以外的部分隐藏日历
    document.onclick = ()=>{
        setShow(false) // 隐藏日历盒子
    }
},[])//仅仅在第一次return后触发

但是，如果不在点击div显示日历盒子的方法内添加阻止冒泡，当点击日历盒子内的任何地方，都会冒泡到document上触发隐藏盒子的方法；所以就要利用阻止冒泡！

// div获取焦点
function divFocus(e) {
    e.nativeEvent.stopImmediatePropagation();
    setFocus(true) // 设置触发div后的样式为开启
    setShow(true) // 设置日历盒子显示
}

此时，点击日历盒子以外的地方就会将日历盒子隐藏！😋