antd Select 组件输入搜索 防抖

// import 
import debounce from 'lodash/debounce';

// -------------------------------------------------------------------------------------------------

// constructor

constructor(props) {
  super(props);
  this.fetchSku = debounce(this.fetchSku, 1000);
}

// --------------------------------------------------------------------------------------------------

// action
fetchSku = val => {
  const { dispatch } = this.props;
  if (val.length === 0) {
    this.setState({
      skuList: [],
    });
  } else {
    dispatch({
      type: 'customSkus/searchCustomSku',
      payload: {
        keyword: val,
      },
      callback: res => {
        this.setState({
          skuList: res,
        });
      },
    });
  }
};
  
//-------------------------------------------------------------------------------------------------

// render
<Select
  showSearch  // 单选搜索模式
  // mode="multiple"  // 可多选
  allowClear
  filterOption={false}  // 是否根据输入项进行筛选
  showArrow={false}
  placeholder={
    <span>
      <Icon type="search" /> 请输入sku进行搜索
    </span>
  }
  notFoundContent={searching ? <Spin size="small" /> : null}  // 无下拉内容时显示
  onSearch={this.fetchSku}  // 触发搜索
  style={{ width: '100%', marginBottom: '15px' }}
  size="small"
>
  {skuList.map(sku => (  // 下面可以不用去看，代码为实际项目中拷贝
    <Option
      key={sku.id}
      value={sku.sku_code}
      onClick={() => this.addToSkuArr(sku)}
      style={{ width: '100%', borderBottom: '1px solid #eee' }}
    >
      <div style={{ display: 'flex', fontSize: '12px', width: '350px' }}>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {sku.sku_code}
        </span>
        <span style={{ margin: '0 10px', color: '#ccc' }}>|</span>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {sku.title}
        </span>
      </div>
    </Option>
  ))}
</Select>