---
order: 2
zh-CN:
	title: 动态加载下一级
en-US:
	title: Loading Usage
---

```js
import { MenuCascader } from 'zent';
import { clone, getNode } from 'zent/es/cascader/public-options-fns';

class Simple extends React.Component {
	state = {
		options: [
			{
				value: '330000',
				label: 'Level1',
				loadChildrenOnExpand: true,
			},
			{
				value: '120000',
				label: 'Level2',
				loadChildrenOnExpand: true,
			},
		],
	};

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

	loadOptions = (selectedOptions, meta) =>
		new Promise((resolve, reject) => {
			console.log(selectedOptions, meta);
			const targetOption = selectedOptions[selectedOptions.length - 1];

			setTimeout(() => {
				const res = [
					{
						value: `Dynamic${targetOption.value}`,
						label: `Dynamic${targetOption.label}`,
						loadChildrenOnExpand: selectedOptions.length < 2,
					},
				];

				if (meta.action === 'loadChildren') {
					const newOptions = clone(this.state.options);
					const node = getNode(newOptions, selectedOptions);
					node.children = res;
					// mark as loaded
					node.loadChildrenOnExpand = false;

					this.setState({
						options: newOptions,
					});
				}

				resolve();
			}, 500);
		});

	render() {
		return (
			<MenuCascader
				clearable
				value={this.state.value}
				options={this.state.options}
				onChange={this.onChange}
				loadOptions={this.loadOptions}
				expandTrigger="click"
				changeOnSelect
			/>
		);
	}
}

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