ant desigin使用之select选择器搜索展示内容与所搜框分离

今天在使用select时搜索后没有选定搜索的内容后,鼠标滚动时发现搜索框内容分离问题。
需要在select中添加getPopupContainer参数来使搜索内容渲染到器父节点上。不加该参数搜索展示内容默认是展示在body上的,所以才有分离显示现象。

const {
  Select
} = antd;

const Option = Select.Option;

var Hello = React.createClass({
  render() {
    return <div style={{margin: 10, overflow: 'scroll', height: 200}}>
      <h2>修复滚动区域的浮层移动问题 / please try open select and scroll the area</h2>
      <div style={{padding: 100, height: 1000, background: '#eee', position: 'relative' }} id="area">
        <h4>可滚动的区域 / scrollable area</h4>
        <Select defaultValue="lucy" style={{ width: 120 }} 
        	getPopupContainer={() => document.getElementById('area')} //该参数是设置搜索的内容渲染到父元素id为area上
        >
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="yiminghe">yiminghe</Option>
        </Select>
      </div>
    </div>;
  }
});

ReactDOM.render(<Hello />,
  document.getElementById('container')
);

官网文档说明在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值