1. 程式人生 > 實用技巧 >解決ant design 中 select的option 隨頁面滾動條滾動的bug

解決ant design 中 select的option 隨頁面滾動條滾動的bug

原因:

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)}
        >