react中调用antd的Select下拉框位置随页面滚动

解决页面滚动下拉框跟随滚动问题

转载已于 2023-02-14 16:42:10 修改 · 899 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/25059344688f

文章标签：

#react.js #前端 #javascript

于 2023-02-14 10:44:53 首次发布

JavaScript学习同时被 3 个专栏收录

26 篇文章

订阅专栏

react

6 篇文章

订阅专栏

Antd组件

3 篇文章

订阅专栏

博客主要围绕页面滚动时下拉框跟随滚动的问题展开。先给出原代码，接着依据官方文档解释找到解决办法，展示改变后的代码，最终解决了滚动时下拉框被带偏的问题，涉及前端开发相关内容。

页面滚动后下拉框也会跟着滚动

点开样式：

页面滚动后

原代码：

<Select
  mode="multiple"
  showSearch
  optionFilterProp="children"
  style={{ width: 600 }}
  placeholder="请选择"
>
  {this.state.zhikongList.map((item: any, index: any) => {
      return <Option value={item.id}>{item.scoreName}</Option>
  })}
</Select>

解决办法为:

getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}

官方文档的解释

改变后代码：

<Select
  getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}//加入这一行
  mode="multiple"
  showSearch
  optionFilterProp="children"
  style={{ width: 600 }}
  placeholder="请选择卡控质检点"
>
  {this.state.zhikongList.map((item: any, index: any) => {
      return <Option value={item.id}>{item.scoreName}</Option>
  })}
</Select>

解决后

滚动不在将下拉框带偏