html使用antd的下拉框控件,react hook 实现简单下拉框效果

前端实现一个简单的下拉列表，大体可以分三部分

1.html的布局

下拉框

• aaaa

• bbbb

• cccc

2.添加点击事件，控制其隐藏显示

const [dropDaown,setDropDaown]=useState(false);

const handleClick = e =>{

e.stopPropagation();// 并非是不能阻止冒泡，而是等他阻止冒泡的时侯，事件已经传递给document了，没东西可阻止了。

e.nativeEvent.stopImmediatePropagation();//可以阻止原生事件绑定到document上的冒泡。React对原生事件封装，提供了很多好东西，但也省略了某些特性。e.stopImmediatePropagation() 就是被省略的部分，然而，他给了开口：e.nativeEvent ，从原生的事件对象里找到stopImmediatePropagation()，完活。

setDropDown(!dropDown);

}

3.给document 添加监听事件，隐藏下拉框

如果是class 类的component的话，可以将监听事件放在componentDidMount钩子函数中，移除监听放在componentwillUnMount钩子函数中。但是在hook中只有一个副作用，如何实现呢。如下，如有不对，请多多指教。

useEffect(()=>{

docoument.addEventListener('click',handleClickClose);

return ()=>{

docoument.removeEventListener('click',handleClickClose);

}

},[])

const handleClickClose = () =>{

setDropDown(!dropDown);

}

总结，其实本文重点是在react hook中如何去绑定原生事件监听和移除事件监听，以及如何阻止原生事件冒泡，阻止原生事件的冒泡必须使用e.nativeEvent.stopImmediatePropagation()方法，否则无法阻止。

标签：原生,阻止,stopImmediatePropagation,监听,react,hook,冒泡,下拉框,事件

来源： https://www.cnblogs.com/SeeyouagainKelly/p/13233793.html