前端實現一個簡單的下拉列表，大體可以分三部分
1.html的布局
<div className="dropdownlist">
<button onClick={handleClick}>下拉框</button>
<div className={dropDown?"show":"hide"}>
<div>
<ul>
<li>
aaaa
</li>
<li>
bbbb
</li>
<li>
cccc
</li>
</ul>
</div>
</div>
</div>
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()方法，否則無法阻止。