scrollMore = (e) => { e.persist(); if(this.state.scrollFlag){ //scrollFlag 节流阀，防止操作频繁没将数据完全加载 const { target } = e; if ((target.scrollTop + target.offsetHeight) > (target.scrollHeight-25)) { //当滚动到最底部25像素的时开始加载 const { Params } = this.state; var pindex = Params.pageIndex +1; if(pindex <= this.state.pageEnd){ //判断要查询的页是否已经是最后一页了 this.setState({ scrollFlag: false, Params:{...this.state.Params,pageIndex:pindex} },() => { this.getList(); //获取option的数据 }) } } } }
至此，滚动加载完成，要注意，在每次聚焦的时候，pageIndex都要先置为1，即从第一页开始查询，否则就是从先前滚动到的那一页。在获取到数据之后，即在getList函数内，要对获取到的数据进行处理，要把获取到的数据拼接在list后面，否则会造成加载更多时之前的数据不见了，并且，在pageIndex是1的时候不拼接，直接赋值。
4、在输入值时会触发option的onSearch事件，在函数里进行查询并重新复制list
此时，会发现一个问题，查询后的值不会马上出来，会等到下一次聚焦搜索框时才会出现。
解决方法：在option中加 filterOption={false}
这样就实现了条件的过滤和关键字的过滤。
到此这篇关于深入理解Antd-Select组件的用法的文章就介绍到这了,更多相关Antd-Select组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: