en-US

The simplest usage.

zh-CN

最简单的用法。

import { useState } from 'react';

import { DAutoComplete, DInput, DTextarea } from '@react-devui/ui';

export default function Demo() {
  const [value1, setValue1] = useState('');
  const [list1, setList1] = useState([]);

  const [value2, setValue2] = useState('');
  const [list2, setList2] = useState([]);

  return (
    <>
      <DAutoComplete
        dList={list1}
        onItemClick={(val) => {
          setValue1(val);
        }}
      >
        <DInput
          dModel={value1}
          onModelChange={(val) => {
            setValue1(val);
            setList1(
              Array.from({ length: val ? 3 : 0 }).map((_, i) => ({
                value: Array(i + 1)
                  .fill(val)
                  .join(''),
              }))
            );
          }}
        />
      </DAutoComplete>
      <DAutoComplete
        dList={list2}
        onItemClick={(val) => {
          setValue2(val);
        }}
      >
        <DTextarea
          dModel={value2}
          rows="5"
          onModelChange={(val) => {
            setValue2(val);
            setList2(
              Array.from({ length: val ? 3 : 0 }).map((_, i) => ({
                value: Array(i + 1)
                  .fill(val)
                  .join(''),
              }))
            );
          }}
        />
      </DAutoComplete>
    </>
  );
}