Hotax/src/components/RBRemoteSelect/index.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Select, Spin } from 'antd';

export default class RBRemoteSelect extends PureComponent {
  static defaultProps = {
    placeholder: '请输入检索内容并根据检索结果进行选择',
  };
  static propTypes = {
    dataSource: PropTypes.array.isRequired,
    placeholder: PropTypes.string,
  };
  handleOnChange = (value) => {
    if (this.props.onChange) {
      this.props.onChange(value);
    }
  }
  lastTimeStamp = 0;
  handleOnSearch = (value) => {
    const eventTimeStamp = new Date().getTime();
    this.lastTimeStamp = eventTimeStamp;
    // 800ms后比较时间时间戳与上次事件的时间戳是否相等
    // 相等说明800ms未进行赋值,则触发搜索; 不相等说明还在继续输入,不触发搜索
    setTimeout(() => {
      if (this.lastTimeStamp === eventTimeStamp) {
        this.props.onSearch(value);
        this.lastTimeStamp = 0;
      }
    }, 800);
  }
  render() {
    const { value, dataSource, placeholder, fetching } = this.props;
    return (
      <div>
        <Select
          mode="multiple"
          filterOption={false}
          notFoundContent={fetching ? <Spin size="small" /> : null}
          value={value}
          onSearch={this.handleOnSearch}
          onChange={this.handleOnChange}
          placeholder={placeholder}
        >
          {
            dataSource.map(
              option => (
                <Select.Option
                  key={option.value}
                  value={option.value}
                >
                  {option.text}
                </Select.Option>
              )
            )
          }
        </Select>
      </div>
    );
  }
}