antd的select搜索展現錯誤

------------恢復內容開始------------

文章前記：我們做的業務是一個多選的下拉框，當時測試給我提了一個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方法克隆一份

------------恢復內容結束------------