zent/src/select/demos/2.controlled.md

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

---
order: 2
zh-CN:
	title: 受控模式下使用组件
	pla: 选择一项
	reset: 重置为初始状态
	external: 外部状态
en-US:
	title: Controlled Mode
	pla: Select an option..
	reset: Reset
	external: External state
---

```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: null,
	};

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

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

	render() {
		const { value } = this.state;
		return (
			<div>
				<div style={{ marginBottom: '10px' }}>
					{i18n.external}: {value ? value.text : 'null'}
				</div>
				<Select
					placeholder="{i18n.pla}"
					options={options}
					onChange={this.onChange}
					value={value}
					clearable
				/>
				<Button onClick={this.reset} style={{ marginTop: '10px' }}>{i18n.reset}</Button>
			</div>
		);
	}
}

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