zent
Version:
一套前端设计语言和基于React的实现
185 lines (178 loc) • 2.7 kB
Markdown
order: 9
zh-CN:
title: 城市级联
zj: 浙江省
hz: 杭州市
xh: 西湖区
wz: 温州市
lw: 龙湾区
xj: 新疆维吾尔自治区
be: 博尔塔拉蒙古自治州
al: 阿拉山口市
jl: 吉林省
bs: 白山市
jy: 江源区
nx: 宁夏回族自治区
pro: 省
city: 市
dis: 区
en-US:
title: City Cascader Usage
zj: Zhejiang
hz: Hangzhou
xh: Xihu
wz: Wenzhou
lw: Longwan
xj: Xinjiang
be: Bortala
al: Alashankou
jl: JiLin
bs: BaiSam
jy: JiangYuang
nx: NingXia
pro: Province
city: City
dis: District
```js
import { TabsCascader } from 'zent';
class Simple extends React.Component {
state = {
value: ['330000', '330100', '330106'],
options: [
{
value: '330000',
label: '{i18n.zj}',
children: [
{
value: '330100',
label: '{i18n.hz}',
children: [
{
value: '330106',
label: '{i18n.xh}'
}
]
},
{
value: '330200',
label: '{i18n.wz}',
children: [
{
value: '330206',
label: '{i18n.lw}'
}
]
}
]
},
{
value: '120000',
label: '{i18n.xj}',
children: [
{
value: '120100',
label: '{i18n.be}',
children: [
{
value: '120111',
label: '{i18n.al}'
}
]
}
]
},
{
value: '130000',
label: '{i18n.jl}',
children: [
{
value: '120100',
label: '{i18n.bs}',
children: [
{
value: '120111',
label: '{i18n.jy}'
}
]
}
]
},
{
value: '140000',
label: '{i18n.jl}',
children: [
{
value: '120100',
label: '{i18n.bs}',
children: [
{
value: '120111',
label: '{i18n.jy}'
}
]
}
]
},
{
value: '150000',
label: '{i18n.jl}',
children: [
{
value: '120100',
label: '{i18n.bs}',
children: [
{
value: '120111',
label: '{i18n.jy}'
}
]
}
]
},
{
value: '160000',
label: '{i18n.nx}',
children: [
{
value: '120100',
label: '{i18n.bs}',
children: [
{
value: '120111',
label: '{i18n.jy}'
}
]
}
]
},
]
}
onChange = (value, selectedOptions, meta) => {
console.log(value, selectedOptions, meta)
this.setState({
value,
});
}
render() {
return (
<TabsCascader
value={this.state.value}
options={this.state.options}
onChange={this.onChange}
clearable
title={[
'{i18n.pro}',
'{i18n.city}',
'{i18n.dis}'
]}
/>
);
}
}
ReactDOM.render(
<Simple />
, mountNode
);
```