介绍

使用react 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效果

用法

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 (
      <div style={{ height: 200, width: "100%", margin: "50px 50px" }}>
        <Cascader
          options={options}
          defaultValue={["130000", "130200", "130202"]}
          displayRender={labels => this.displayRender(labels)}
          allowClear={true}
          placeholder="请选择"
          onChange={(option)=>{this.onChange(option)}}
        />
      </div>
    );
  }
}

export default App;