npm install react-web-cascader
npm install react-web-cascader
API
参数 | 说明 | 类型| 默认值
----|------|----|----
defaultValue | 默认的选中项 | {value:string,label:string,children:{value:string,label:string,children:[]}[]]}[]| 无
displayRender | 选择后展示的渲染函数 | function| labels => labels.join('/ ')
options | 可选项数据源 | []object| 无
allowClear|是否支持清除|boolean|true
placeholder|输入框占位文本|string|'Please select'
onChange|选择完成后的回调|({valueList, labeList}) => void|无
Auto Play效果
!image
用法
import React, { Component } from "react";
import Cascader from "react-web-cascader";const options = [
{
value: "110000",
label: "北京",
children: [
{
value: "110000",
label: "北京市",
children: [
{
value: "110101",
label: "东城区"
},
{
value: "110102",
label: "西城区"
}
]
}
]
},
{
value: "130000",
label: "河北省",
children: [
{
value: "130100",
label: "石家庄市",
children: [
{
value: "130102",
label: "长安区"
},
{
value: "130104",
label: "桥西区"
}
]
},
{
value: "130200",
label: "唐山市",
children: [
{
value: "130202",
label: "路南区"
}
]
}
]
}
];
class App extends Component {
displayRender(labels) {
return labels.join("/ ");
}
onChange(option){
console.log(option); //{labeList:["河北省", "唐山市","路南区"],valueList:["130000", "130200","130202"]}
}
render() {
return (
defaultValue={["130000", "130200", "130202"]}
displayRender={labels => this.displayRender(labels)}
allowClear={true}
placeholder="请选择"
onChange={(option)=>{this.onChange(option)}}
/>
);
}
}export default App;