zent/src/cascader/demos/15.async-options.md

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

---
order: 15
zh-CN:
	title: 动态加载选项
	zj: 浙江省
	hz: 杭州市
	xh: 西湖区
	yh: 余杭区
	wz: 温州市
	lw: 龙湾区
	xj: 新疆维吾尔自治区
	be: 博尔塔拉蒙古自治州
	al: 阿拉山口市
	load: 加载选项
en-US:
	title: Load options dynamically
	zj: Zhejiang
	hz: Hangzhou
	xh: Xihu
	yh: YuHang
	wz: Wenzhou
	lw: Longwan
	xj: Xinjiang
	be: Bortala
	al: Alashankou
	load: Load options
---

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

const OPTIONS = [
	{
		value: '330000',
		label: '{i18n.zj}',
		children: [
			{
				value: '330100',
				label: '{i18n.hz}',
				children: [
					{
						value: '330106',
						label: '{i18n.xh}',
					},
					{
						value: '330107',
						label: '{i18n.yh}',
					},
				],
			},
			{
				value: '330200',
				label: '{i18n.wz}',
				children: [
					{
						value: '330206',
						label: '{i18n.lw}',
					},
				],
			},
		],
	},
	{
		value: '120000',
		label: '{i18n.xj}',
		children: [
			{
				value: '120100',
				label: '{i18n.be}',
			},
		],
	},
];

class Simple extends React.Component {
	state = {
		value: [
			['330000', '330100', '330106'],
			['330000', '330100', '330107'],
		],
		options: [],
	};

	onChange = (value, selectedOptions, meta) => {
		console.log(value, selectedOptions, meta);
		this.setState({
			value,
		});
	};

	loadOptions = () => {
		setTimeout(() => {
			this.setState({ options: OPTIONS });
		}, 200);
	};

	render() {
		return (
			<>
				<MenuCascader
					value={this.state.value}
					options={this.state.options}
					onChange={this.onChange}
					expandTrigger="hover"
					multiple
				/>
				<Button style={{ marginTop: 16 }} onClick={this.loadOptions}>
					{i18n.load}
				</Button>
			</>
		);
	}
}

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