en-US

When dCreateItem is set, the creation behavior is determined by the return value.

zh-CN

当设置了 dCreateItem，由返回值决定创建行为。

import { useState, useCallback } from 'react';

import { DSelect } from '@react-devui/ui';

export default function Demo() {
  const [list, setList] = useState(() =>
    Array.from({ length: 100 }).map((_, index) => ({
      label: `Item ${index}`,
      value: index,
      disabled: index === 3,
    }))
  );

  const handleCreateItem = (item) => {
    setList((prevList) => [item, ...prevList]);
  };

  const createFn = useCallback(
    (value) => {
      if (/^[0-9]+$/.test(value) && Number(value) > list.length) {
        return {
          label: `Item ${value}`,
          value: Number(value),
        };
      }
    },
    [list.length]
  );

  return (
    <>
      <DSelect
        style={{ width: 200 }}
        dList={list}
        dPlaceholder="Create"
        dSearchable
        dCreateItem={createFn}
        onCreateItem={handleCreateItem}
      />
      <DSelect
        style={{ width: 400 }}
        dList={list}
        dPlaceholder="Create in multiple mode"
        dSearchable
        dCreateItem={createFn}
        onCreateItem={handleCreateItem}
        dMultiple
      />
    </>
  );
}