1. 程式人生 > >使用antd的Select元件,Cascader元件,DatePicker等下拉選項必須要新增的getPopupContainer

使用antd的Select元件,Cascader元件,DatePicker等下拉選項必須要新增的getPopupContainer

getPopupContainer 選單渲染父節點。預設渲染到 body 上,如果你遇到選單滾動定位問題,試試修改為滾動的區域,並相對其定位。

這個屬性,看似不重要的屬性,卻起著重大的作用。

效果圖:

當資料比較多的,可以滾動的時候。點選選擇框,滑動滾輪

沒有新增這個屬性的時候:

當沒有這個屬性的時候 隨著滾動 選項會和選擇框分離。

當新增這個屬性後:

點選後滾動就不會分離

如何新增:

<span className={styles.SeachMargin} id='Select'>

<Select style={{ width: 120 }} onChange={handleSelect} allowClear defaultValue="請選擇狀態"

getPopupContainer={()=>document.getElementById('Select')}

>

在下拉框的父節點設定一個id,在下 拉框中getPopupContainer={()=>document.getElementById(父節點設定的id)   

使用getPopupContainer屬性: select元件,Cascader元件    

使用getCalendarContainer屬性: DatePicker元件

在antd的每個元件api中都有說明是使用getPopupContainer還是getCalendarContainer​​​​​​​