Ant Design下拉框、时间框等选择菜单漂移问题处理方案

Posted 2023-03-15

参考技术A 问题描述及分析：

出现下拉框的选择菜单，“灵魂”漂移的问题主要在于,选择菜单必须有挂载的父类组件。只有将选择菜单挂载到相对应的父类组件中，选择菜单便会跟随父类组件来移动。下面介绍一下两种解决方案：

就近选择父类组件定义ID,通过dom操作进行挂载，如下

````

<div style= padding: 100, height: 1000, background: '#eee', position: 'relative' id="area" >

  <Select

    defaultValue="lucy"

    style= width: 120

    getPopupContainer=() => document.getElementById('area')

  >

    <Option value="jack">Jack</Option>

    <Option value="lucy">Lucy</Option>

    <Option value="yiminghe">yiminghe</Option>

  </Select>

</div>

````

在Select组件中添加“ getPopupContainer=triggerNode => triggerNode.parentNode ”属性即可。

````

<Select getPopupContainer=triggerNode => triggerNode.parentNode >

    // some <Option></Option>

</Select>

````

备注：时间下拉框与普通下拉框的api属性不同，可查阅文档。通过getCalendarContainer（）来解决漂移问题。