使用antd UI框架中的select需要注意的一些问题
问题1:滚动跟随问题
问题描述:使用表单时,当页面过长出现滚动,select的下拉框不会跟随输入框,造成用户体验性不好
解决方法:在 Option 或Select.Option 中添加 getPopupContainer={(triggerNode) => triggerNode.parentNode}
,完美解决
问题2:可输入过滤选项问题
问题描述:通过输入过滤选项
解决方法:在 Option 或Select.Option 中添加 showSearch
与 optionFilterProp="children"
,完美解决
问题3:动态加载
问题描述: 动态分页加载option的选项,并且,滚动加载更多,可支持关键字搜索(由后端查询数据库放回数据)
解决方法::
1、当搜索框聚焦时,获取数据,如10条,关键字为空
2、将数据遍历到option选项中
3、选项的滚动,当滚动到底部时,加载下一页的数据,在option中添加方法 onPopupScroll={this.scrollMore}
scrollMore函数如下
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}
这样就实现了条件的过滤和关键字的过滤。