ant design select组件页面下滑时下拉框漂浮 / 下拉框不同步问题

Love The Way You Lie 2021-09-20 17:42 1166阅读 0赞

# 问题是这样的 #

这是问题代码
    <Select>
        <Option>1</Option>
        <Option>2</Option>
    </Select>

![这个是遇到的问题,就是下拉框和页面不同步了][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]

# 解决方法 在select中添加 #

**getPopupContainer=\{triggerNode => triggerNode.parentNode\}**

<Select getPopupContainer={triggerNode => triggerNode.parentNode}>
        <Option>1</Option>
        <Option>2</Option>
    </Select>

![就没问题了][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 1]

# ant design 中日期选择器也有这种问题 #

原本代码

const { RangePicker } = DatePicker;
    <RangePicker  />

![原来是这样的][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 2]

## 解决代码 **getCalendarContainer=\{triggerNode => triggerNode.parentNode\}** ##

<RangePicker getCalendarContainer={triggerNode => triggerNode.parentNode} />

![就OK了][OK]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]: /images/20210920/40cf24d8f33d4207b976d3a15cf04fba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 1]: /images/20210920/2c7a08698e244a9fa41a10e9eeeb57c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 2]: /images/20210920/919452e73c8a45d5a23c002f57aae8be.png
[OK]: /images/20210920/cbd01cb492aa43d6acf09ca87305da27.png