zent/src/cascader/demos/11.controlled.md

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

---
order: 11
zh-CN:
	title: 弹层受控模式
	open: 打开
	zj: 浙江省
	hz: 杭州市
	xh: 西湖区
	yh: 余杭区
	wz: 温州市
	lw: 龙湾区
	xj: 新疆维吾尔自治区
	be: 博尔塔拉蒙古自治州
	al: 阿拉山口市
en-US:
	title: Popup controlled mode
	open: Open
	zj: Zhejiang
	hz: Hangzhou
	xh: Xihu
	yh: YuHang
	wz: Wenzhou
	lw: Longwan
	xj: Xinjiang
	be: Bortala
	al: Alashankou
---

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

class Simple extends React.Component {
	state = {
		visible: false,
		tabsVisible: false,
		value: [],
		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}',
					},
				],
			},
		],
	};

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

	onVisibleChange = visible => {
		this.setState({ visible });
	};

	onTabsVisibleChange = visible => {
		this.setState({ tabsVisible: visible });
	};

	render() {
		return (
			<div>
				<div style={{ display: 'flex' }}>
					<MenuCascader
						value={this.state.value}
						options={this.state.options}
						onChange={this.onChange}
						expandTrigger="hover"
						visible={this.state.visible}
						onVisibleChange={this.onVisibleChange}
					/>
					<Button
						style={{ marginLeft: 16 }}
						onClick={() => this.onVisibleChange(true)}
					>
						{i18n.open}
					</Button>
				</div>
				<div style={{ display: 'flex', marginTop: 16 }}>
					<TabsCascader
						value={this.state.value}
						options={this.state.options}
						onChange={this.onChange}
						visible={this.state.tabsVisible}
						onVisibleChange={this.onTabsVisibleChange}
					/>
					<Button
						style={{ marginLeft: 16 }}
						onClick={() => this.onTabsVisibleChange(true)}
					>
						{i18n.open}
					</Button>
				</div>
			</div>
		);
	}
}

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