React js 点击输入框其它位置隐藏下拉框

 案例如下：输入框输入内容下拉框展示，点击除搜索组件外其它区域隐藏下拉框

 1、document上添加点击事件，设置下拉框为隐藏状态。写在useEffect里是函数式组件写法，依赖项为空数组执行一次，将事件绑定到document上。

useEffect(()=>{
  // 点击其他地方隐藏搜索下拉框
  document.addEventListener('click', () => {
    setInputStatus(false)
  })
},[])

2、在封装搜索组件的最外层添加阻止冒泡事件，就达到了点击搜索组件，下拉框不隐藏；点击除搜索组件外其它区域，下拉框隐藏。

 3、阻止冒泡在react中写法略有不同，在nativeEvent属性上的stopImmediatePropagation。

// 阻止冒泡
const stopBubble = (event: React.MouseEvent<HTMLDivElement, MouseEvent>)=> {
  event.nativeEvent.stopImmediatePropagation() //阻止冒泡
}