首页 > 其他 > 详细

antd的select搜索展现错误

时间:2020-04-04 16:56:14      阅读:121      评论:0      收藏:0      [点我收藏+]

------------恢复内容开始------------

文章前记:我们做的业务是一个多选的下拉框,当时测试给我提了一个bug说搜索有问题,我当时懵了我没有做搜索呀,原来antd智能的帮我们做了搜索。经过我的改造可以准确的搜索了,之前的搜索就是输入第二个字回搜索不出来东西。

技术分享图片

 

 为什么回有这样的问题?

原因是select搜索是按照value绑定的值来进行搜索的。我的代码绑定的是id,那么就会按照id的值搜索,业务中其实我想按照username的值进行搜索。直接改成username调接口的额时候不太方便,所以那我就自己做一个搜索。搜索主要是通过onsearch事件检查value值。写方法之前要设置自带的搜索为false,

filterOption={false}

技术分享图片

 

 下面开始进行搜索的方法:

 onSearch = (e) => {
        let list =[];
        let receiveinfo= this.state.receiveinfo;
        if(e.length>0){
            for (var i = 0; i < receiveinfo.length; i++) {
                var num = receiveinfo[i].username.indexOf(e);
                if (num !== -1) {
                    list.push(receiveinfo[i]);
                }
            }
            this.setState(
                {
                    receiveinfo:list
                }
            );
        }else{
            this.setState(
                {
                    receiveinfo:receiveinfos
                }
            );
        }
       
    }

原理很简单,用indexof查找这个值存push到新数组中。如果输入的值为空返回原数组,原数值用slice方法克隆一份

------------恢复内容结束------------

antd的select搜索展现错误

原文:https://www.cnblogs.com/smdb/p/12632388.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!