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

问题描述及分析:

Ant Design下拉框、时间框等选择菜单漂移问题处理方案_第1张图片

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

方法一:

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

````

id="area">

 

    defaultValue="lucy"

    style={{ width: 120 }}

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

  >

   

   

   

 

````

方法二:

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

````

````

备注:时间下拉框与普通下拉框的api属性不同,可查阅文档。通过getCalendarContainer()来解决漂移问题。

你可能感兴趣的:(Ant Design下拉框、时间框等选择菜单漂移问题处理方案)