---
order: 10
zh-CN:
	title: 城市级联动态加载
	zj: 浙江省
	xj: 新疆维吾尔自治区
	pro: 省
	city: 市
	dis: 区
en-US:
	title: City Cascader Loading Usage
	zj: Zhejiang
	xj: Xinjiang
	pro: Province
	city: City
	dis: District
---

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

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

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

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

			setTimeout(() => {
				const res = [
					{
						value: `value-${selectedOptions.length}`,
						label: `label-${selectedOptions.length}`,
						loadChildrenOnExpand: selectedOptions.length < 2,
					},
				];
				const newOptions = clone(this.state.options);
				const node = getNode(newOptions, selectedOptions);
				node.children = res;
				node.loadChildrenOnExpand = false;

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

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

	render() {
		return (
			<TabsCascader
				value={this.state.value}
				options={this.state.options}
				onChange={this.onChange}
				loadOptions={this.loadOptions}
				changeOnSelect
				clearable
				title={['{i18n.pro}', '{i18n.city}', '{i18n.dis}']}
			/>
		);
	}
}

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