zent/src/select/demos/11.revive-option.md

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

---
order: 11
zh-CN:
	title: 受控模式下回填选中的值
	pla: 选择一项
	load: 加载选项
en-US:
	title: Initialize Value in Controlled Mode
	pla: Select an option..
	load: Load Options
---

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

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

class Demo extends Component {
	state = {
		value: Select.reviveValue('4'),
		options,
	};

	onChange = value => {
		this.setState({
			value,
		});
	};

	reset = () => {
		this.setState({
			value: null,
		});
	};

	loadOptions = () => {
		setTimeout(() => {
			this.setState({
				options: options.concat({ key: '4', text: 'Option 4' }),
			});
		}, 3000);
	};

	render() {
		const { value, options } = this.state;
		return (
			<div style={{ display: 'flex' }}>
				<Select
					placeholder="{i18n.pla}"
					options={options}
					onChange={this.onChange}
					value={value}
					clearable
				/>
				<Button style={{ marginLeft: 16 }} onClick={this.loadOptions}>
					{i18n.load}
				</Button>
			</div>
		);
	}
}

ReactDOM.render(<Demo />, mountNode);
```