Reactantデザインのリモートローディングドロップダウンボックスオプションを選択

Reactantデザインのリモートローディングドロップダウンボックスオプションを選択

let timeout: any;
let currentValue: any;

const fetch = function (value: any, callback: (data: any) => void) {
    
    
  if (timeout) {
    
    
    clearTimeout(timeout);
    timeout = null;
  }
  currentValue = value;

  function fake() {
    
    
    service.selectByName({
    
    "orgName": value}).then(data => {
    
    
      if (data) {
    
    
        data = data.result ? data.result : data;
        if (currentValue === value) {
    
    
          const dataInfo: {
    
     value: any; text: any; }[] = [];
          data.map((r: {
    
     organId: any; organName: any; }) => {
    
    
            dataInfo.push({
    
    
              value: r.organId,
              text: r.organName,
            });
          });
          callback(dataInfo);
        }
      } else {
    
    
        Modal.info({
    
    
          title: '提示',
          content: '系统错误',
        })
      }
    })
  }

  timeout = setTimeout(fake, 300);
};

/**
 * 基本信息主键
 */
const OrganBasicInfoByName: FC<OrganBasicInfoByNameProps> = (props) => {
    
    
  const {
    
    Option} = Select;

  const [form] = Form.useForm();

  // 下拉信息
  const [data, setData] = useState<any>([]);

  //  输入框值选中值
  const [value, setValue] = useState<any>();

  // 值改变的时候
  const handleChange = (value: string) => {
    
    
    setValue(value);
  };

  // 搜索
  const handleSearch = (value: any) => {
    
    
    if (value) {
    
    
    // 使用回调函数取回查询的值
      fetch(value, (data: any) => {
    
    
          setData(data);
        }
      );
    } else {
    
    
      setData([]);
    }
  };

  // 下拉框值
  const options = data.map((d: {
    
     value: any; text: React.ReactNode; }) =>
    <Option key={
    
    d.value} value={
    
    d.value}>{
    
    d.text}</Option>);

  return (
      <Form
        form={
    
    form}
        layout="vertical"
      >
        <Row>
          <Col lg={
    
    6} md={
    
    12} sm={
    
    24}>
            <Form.Item
              label="名称"
              name="organName"
              rules={
    
    [{
    
    required: true, message: '名称'}]}
            >
                  <Select
                    showSearch
                    value={
    
    value}
                    style={
    
    {
    
    width: '100%'}}
                    placeholder="输入名称查询"
                    onChange={
    
    handleChange}
                    defaultActiveFirstOption={
    
    false}
                    showArrow={
    
    true}
                    filterOption={
    
    false}
                    onSearch={
    
    handleSearch}
                    notFoundContent={
    
    null}
                  >
                    {
    
    options}
                  </Select>
            </Form.Item>
          </Col>
         </Row>
      </Form>
  )
};
export default OrganBasicInfoByName;

• テストスクリーンショット：