解決ant design 中 select的option 隨頁面滾動條滾動的bug
阿新 • • 發佈:2020-10-26
原因:
Select元件有個API getPopupContainer,Ant Design官方文件給出的用途解釋為:“選單渲染父節點。預設渲染到 body 上,如果你遇到選單滾動定位問題,試試修改為滾動的區域,並相對其定位”。同時官網也強調一個特殊情況需要注意:“如果發現下拉選單跟隨頁面滾動,或者需要在其他彈層中觸發 Select,請嘗試使用 getPopupContainer={triggerNode => triggerNode.parentNode} 將下拉彈層渲染節點固定在觸發器的父元素中”。
解決方案:
在Select元件中新增“getPopupContainer={triggerNode => triggerNode.parentNode}
如果是日期DatePicker元件 使用“getCalendarContainer={triggerNode => triggerNode.parentNode}”
<Select
getPopupContainer={triggerNode => triggerNode.parentNode}
defaultValue=''
notFoundContent="請選擇"
placeholder="請選擇"
value={this.state.nextAction}
onChange={(value) => this.changeSubmitOption(value)}
>