antd Select進階功能 動態更新、函數防抖

1、動態更新Options

Antd Select自帶的搜索功能不少時候須要結合後端的接口，輸入一個關鍵字的時候會自動更新選擇器的選項. 下面列一些注意點

基礎實現

選擇器選項必須和每次更新的數據掛鉤, 這個值能夠經過state,也能夠經過props拿到

再結合循環的方法例如map遍歷渲染options

import React, { PureComponent, Fragment } from 'react'
import { Select } from 'antd'
import axios from 'axios'
const Option = Select.Option;

export default class AntSelect extends PureComponent{
    ...
    
    handleSearch = (keywords) => {
        //請求後端搜索接口
        axios('http://xxx.com/xxx', {
            keywords,
        }).then(data){
            this.setState({
                list: data
            })
        }
    }
    
    render(){
        const { list } = this.state;
        return(
            <Select
                mode="multiple"         //多選模式
                placeholder="請選擇"
                filterOption={false}    //關閉自動篩選
                onSearch={this.handleSearch}
            >
                {
                    list.map((item, index) => (
                        <Option key={index} value={item}>{item}</Option>
                    ))
                }
            </Select>
        )
    }
    ...
}

上面就是一個簡單的例子. 除了要動態渲染Options之外, 還須要注意設置這個屬性:
filterOption={false}

若是不設置會致使即便拿到了最新的數據仍是依舊顯示無匹配結果

由於filterOption默認爲true, 當你輸入內容時候,會先在已有選項裏面尋找符合項, 不管是否找到，都會從新渲染Options,這樣你接口請求的數據的渲染被覆蓋了, 天然看不到結果了。因此須要把它關掉！

2、函數防抖

性能優化

由於輸入是屬於高頻js的操做， 因此咱們須要使用到函數節流或者函數防抖.

這裏我直接使用函數防抖插件:lodash/debounce

import debounce from 'lodash/debounce';

//在constructor統一綁定事件. 和常常使用的bind(this)同樣
class AntSelect extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleSearch = debounce(this.handleSearch, 500);
  }
  
  handleSearch = (value) => {
      ...
  }
  ...
}

這樣你在輸入數據的500ms後纔會觸發handleSearch函數,能夠大幅度減小調取後臺接口的次數！

出現加載狀態

antd已經給咱們封裝好了加載狀態的組件:<Spin />.而後經過state控制其出現和消失

class antdSelect extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            spinState: false,
        }
      }
    
    handleSearch = (keywords) => {
        ...
        //調用接口前清空數據, 出現加載icon
        this.setState({
            list: [],
            spinState: true
        })
        
        //請求後端搜索接口
        axios('http://xxx.com/xxx', {
            keywords,
        }).then(data){
            this.setState({
                list: data,
                spinState: false
            })
        }
        ...
    }
    
    render(){
        const { list, spinState } = this.state;
        return(
            <Select
                ...
                notFoundContent={spinState ? <Spin /> : '暫無數據'}
                onSearch={this.handleSearch}
                ...
            >
                {
                    list.map((item, index) => (
                        <Option key={index} value={item}>{item}</Option>
                    ))
                }
            </Select>
        )
    }
}

更多的能夠查看官方文檔: 《Antd-Select》