zent/src/select/demos/10.creatable.md

一套前端设计语言和基于React的实现

---
order: 10
zh-CN:
	title: 创建条目
	placeholder: 选择一项
en-US:
	title: Creatable
	placeholder: Select an option..
---

```js
import { Select } from 'zent';

const OPTIONS = [
	{
		key: '1',
		text: 'Option 1',
	},
	{
		key: '2',
		text: 'Option 2',
	},
	{
		key: '3',
		text: 'Option 3',
	},
		{
		key: '4',
		text: 'Option 4',
	},
];

let optionId = 10;

function SingleCreatableSelect() {
  const [options, setOptions] = useState(OPTIONS);
  const [value, onChange] = useState(null);
  
  const onCreate = React.useCallback(text => {
    return new Promise(resolve => {
      setTimeout(() => {
        optionId += 1;

        const newOption = {
          key: optionId,
          text,
        };

        setOptions(options.concat(newOption));
        onChange(newOption);
        resolve();
      }, 500);
    });
  }, [options]);
	
	return (
    <Select
      options={options}
      clearable
      placeholder="{i18n.placeholder}"
      creatable
      onCreate={onCreate}
      value={value}
      onChange={onChange}
    />
	);
}

function MultiCreatableSelect() {
  const [options, setOptions] = useState(OPTIONS);
  const [value, onChange] = useState([{key: '444', text: '444'}]);
	
	return (
    <Select
      options={options}
      clearable
      placeholder="{i18n.placeholder}"
      creatable
      value={value}
      onChange={onChange}
      multiple
    />
	);
}

ReactDOM.render((
  <div className="zent-demo-select-creatable">
    <SingleCreatableSelect />
    <MultiCreatableSelect />
  </div>
), mountNode);
```

<style>
	.zent-demo-select-creatable {
		> * {
			margin-bottom: 10px;
		}
	}
</style>