react-web-cascader

介绍

使用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;