问题描述
改项目使用Antd4.2.2的版本，在使用弹出层组件时，当滑动滚动条，弹出层组件不随点击的input框移动而产生移动。（如下图）
涵盖的组件包括：
- Menu
- Dropdown
- DatePicker
- TimePicker
- Select
- Popover
- Tooltip
- Popconfirm
问题解决
使用组件时加入属性
getPopupContainer={triggerNode => triggerNode.parentNode}
该属性可以在Antd4.x官网的Select组件中找到
示例链接：codesandbox.io/s/4j168r7jw…
Select中解决
<Select defaultValue="lucy" getPopupContainer={triggerNode => triggerNode.parentNode}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
DatePicker中解决
<DatePicker getPopupContainer={triggerNode => triggerNode.parentNode}/>
Dropdown中解决
<Dropdown overlay={menu} trigger={['click']} getPopupContainer={triggerNode => triggerNode.parentNode}>
<PlusOutlined onClick={e => e.preventDefault()} style={{ margin: "4px" }} />
</Dropdown>
Menu中解决
<Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal" getPopupContainer={triggerNode => triggerNode.parentNode}>
<Menu.Item key="mail">
<MailOutlined />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<AppstoreOutlined />
Navigation Two
</Menu.Item>
<SubMenu
title={(
<span className="submenu-title-wrapper">
<SettingOutlined />
Navigation Three - Submenu
</span>
)}
>
<Menu.ItemGroup title="Item 1" >
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
在Popover中解决
<Popover content={content} title="Title" getPopupContainer={triggerNode => triggerNode.parentNode}>
<Button type="primary">Hover me</Button>
</Popover>
在Tooltip中解决
<Tooltip title={t('文字提示')} getPopupContainer={triggerNode => triggerNode.parentNode}>
<span>{t('鼠标移过来')}</span>
</Tooltip>
在Popconfirm中解决
<Popconfirm
title="Are you sure delete this task?"
onConfirm={confirm}
onCancel={cancel}
okText="Yes"
cancelText="No"
getPopupContainer={triggerNode => triggerNode.parentNode}
>
<a href="#">Delete</a>
</Popconfirm>
