案例如下:输入框输入内容下拉框展示,点击除搜索组件外其它区域隐藏下拉框
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() //阻止冒泡
}