zent
Version:
一套前端设计语言和基于React的实现
122 lines (116 loc) • 2 kB
Markdown
order: 1
zh-CN:
title: 菜单型级联
zj: 浙江省测试超出长度浙江省测试超出长度
hz: 杭州市
xh: 西湖区
yh: 余杭区
wz: 温州市
lw: 龙湾区
xj: 新疆维吾尔自治区
be: 博尔塔拉蒙古自治州
al: 阿拉山口市
en-US:
title: Basic Usage
zj: Zhejiang
hz: Hangzhou
xh: Xihu
yh: YuHang
wz: Wenzhou
lw: Longwan
xj: Xinjiang
be: Bortala
al: Alashankou
```jsx
import { MenuCascader } 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: '330107',
label: '{i18n.yh}',
},
],
},
{
value: '330200',
label: '{i18n.wz}',
children: [
{
value: '330206',
label: '{i18n.lw}',
disabled: true,
},
],
},
],
},
{
value: '120000',
label: '{i18n.xj}',
disabled: true,
children: [
{
value: '120100',
label: '{i18n.be}',
children: [
{
value: '120111',
label: '{i18n.al}',
},
],
},
],
},
],
};
onChange = (value, selectedOptions, meta) => {
console.log(value, selectedOptions, meta);
this.setState({
value,
});
};
render() {
return (
<div
style={{
display: 'flex',
justifyContent: 'space-between',
paddingRight: '100px',
}}
>
<MenuCascader
value={this.state.value}
options={this.state.options}
onChange={this.onChange}
expandTrigger="click"
clearable
/>
<MenuCascader
value={this.state.value}
options={this.state.options}
onChange={this.onChange}
clearable
expandTrigger="hover"
/>
</div>
);
}
}
ReactDOM.render(<Simple />, mountNode);
```