en-US

This example shows loading when searching.

zh-CN

该示例展示了搜索时加载。

import { useState, useRef } from 'react';

import { useImmer, useAsync } from '@react-devui/hooks';
import { SearchOutlined } from '@react-devui/icons';
import { DAutoComplete, DInput, DCompose, DButton } from '@react-devui/ui';

export default function Demo() {
  const dataRef = useRef({});
  const async = useAsync();

  const [value, setValue] = useState('');
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);

  return (
    <DCompose>
      <DAutoComplete
        dList={list}
        dLoading={loading}
        onItemClick={(val) => {
          setValue(val);
        }}
      >
        <DInput
          dModel={value}
          onModelChange={(val) => {
            setValue(val);

            if (val.length === 0) {
              setLoading(false);
              setList([]);
            } else {
              setLoading(true);
              setList([]);
              dataRef.current.clearTid?.();
              dataRef.current.clearTid = async.setTimeout(() => {
                setLoading(false);
                setValue(val);
                setList(
                  Array.from({ length: val ? 3 : 0 }).map((_, i) => ({
                    value: Array(i + 1)
                      .fill(val)
                      .join(''),
                  }))
                );
              }, 1000);
            }
          }}
        />
      </DAutoComplete>
      <DButton dIcon={<SearchOutlined />}></DButton>
    </DCompose>
  );
}