react（7） ant design 中 select的option 随页面滚动条滚动的bug问题

最新推荐文章于 2025-08-06 16:43:52 发布

fongdaBoy

最新推荐文章于 2025-08-06 16:43:52 发布

阅读量4.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/iceking66/article/details/86612130

react 专栏收录该内容

7 篇文章

订阅专栏

本文解决了一个关于Select组件下拉菜单显示位置错误的问题，通过添加getPopupContainer属性，确保了下拉菜单正确地定位在其父元素内，避免了布局干扰。

原代码(有bug代码)

<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
   <Option value="jack">Jack</Option>
   <Option value="lucy">Lucy</Option>
   <Option value="disabled" disabled>Disabled</Option>
   <Option value="Yiminghe">yiminghe</Option>
</Select>

解决方案：

在Select组件中添加“getPopupContainer={triggerNode => triggerNode.parentNode}” 使其固定在父元素中

<Select getPopupContainer={triggerNode => triggerNode.parentNode}
    defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="disabled" disabled>Disabled</Option>
    <Option value="Yiminghe">yiminghe</Option>
</Select>