antd库中使用Select组件下拉选项偏移错位处理方法

 浆糊之家   2019-03-11 20:47   2,456 views 热度值

在react使用Antd时,在Modal组件中使用Select组件,当点击Select组件出现下拉选项后滚动原始页面,出现下拉选项和Select框分离现象。 antdError1.png

Select组件有个API getPopupContainer,Ant Design官方文档给出的用途解释为:“菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位”。
同时官网也强调一个特殊情况需要注意:“如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中”。

解决方法:

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

题外篇:

像在antdPro脚手架中,可以在BaseMenu.js中进行全局绑定Select的父元素位置,直接避免每个使用到的都要进行此操作,但还是有部份是需要手动绑定的,比如弹层中使用。

以下是BaseMenu.js文件内容

 发表评论


表情