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

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

<pre class="lang:js" decode:true=""> // 显示我的关键错误代码区域，更好处理分析
<Select mode=multiple>
  <Option value=1>游泳</Option>
  <Option value=2>打篮球</Option>
  <Option value=3>踢足球</Option>
  <Option value=4>跑步</Option>
  <Option value=5>爬山</Option>
  <Option value=6>骑行</Option>
  <Option value=7>桌球</Option>
  <Option value=8>麦霸</Option>
</Select>

<pre class="lang:js" decode:true=""> // 显示我的关键错误代码区域，更好处理分析

</Select>

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

解决方法：

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

<Select mode=multiple getPopupContainer={(triggerNode) => triggerNode.parentNode}>
    // 你的组件 <Option>...</Option>
</Select>

<Select mode=multiple getPopupContainer={(triggerNode) => triggerNode.parentNode}>

// 你的组件 <Option>...</Option>

</Select>

题外篇：

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

以下是BaseMenu.js文件内容

export default class BaseMenu extends PureComponent {
    // ...省略无用代码
    getPopupContainer = (fixedHeader, layout) => {
        if (fixedHeader && layout === 'topmenu') {
            return this.wrap;
        }
        return document.body;
    };

    render() {
        const {fixedHeader,layout } = this.props;
        return (
            <>
                <Menu
                  key="Menu"
                  mode={mode}
                  theme={theme}
                  onOpenChange={handleOpenChange}
                  selectedKeys={selectedKeys}
                  style={style}
                  className={cls}
                  {...props}
                  getPopupContainer={() => this.getPopupContainer(fixedHeader, layout)}
                >
                  {this.getNavMenuItems(menuData)}
                </Menu>
                <div ref={this.getRef} />
            </>
        );
    }
}

export default class BaseMenu extends PureComponent {

// ...省略无用代码

getPopupContainer = (fixedHeader, layout) => {

if (fixedHeader && layout === 'topmenu') {

return this.wrap;

}

return document.body;

};

render() {

const {fixedHeader,layout } = this.props;

return (

<Menu

key="Menu"

mode={mode}

theme={theme}

onOpenChange={handleOpenChange}

selectedKeys={selectedKeys}

style={style}

className={cls}

{...props}

getPopupContainer={() => this.getPopupContainer(fixedHeader, layout)}

{this.getNavMenuItems(menuData)}

</Menu>

</>

);

}

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

解决方法：

发表评论取消回复

Add 浆糊之家 to your Homescreen!

解决方法：

发表评论 取消回复

Add 浆糊之家 to your Homescreen!

发表评论取消回复