ant design select组件 解决选项框随页面滚动分离问题

在ant design 使用过程中，发现页面内容超过一屏会出现选项框跟随滚动而滚动
其实这是官方组件存在的问题，

getPopupContainer 菜单渲染父节点，默认渲染到 body 上。

使用getPopupContainer属性： select组件，Cascader组件

使用getCalendarContainer属性： DatePicker****组件

在antd的每个组件api中都有说明是使用getPopupContainer还是getCalendarContainer

1，getPopupContainer属性的，可以直接使用 getPopupContainer={triggerNode => triggerNode.parentNode}

2，**getCalendarContainer属性的，**默认为 body 上新建 div，可能不需要设置这个属性。如果需要设置可以按照上文中那样设置

使用 getPopupContainer={triggerNode => triggerNode.parentElement} 将下拉弹层渲染节点固定在触发器的父元素中。

参考文章：
文章参考1
文章参考2

  <Form.Item name="onArea" label="出发区域">
    <Select
      getPopupContainer={(triggerNode) => triggerNode.parentNode}
      showSearch={true}
      filterOption={(input, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
      notFoundContent={null}
      placeholder="请选择出发城市后操作"
      onSelect={(id) => {
        form.resetFields(['onStation']); // 重置
        dispatch(getstationOptions(id)); // 更新站点
      }}
      allowClear
    >
      {allbeginAreaOptions.map((item: areaListType) => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  </Form.Item>