antd 的级联选择框

首先我们来做一个接口，接口的形式大概如下：

接口

接口源代码：

{"A":{"奥迪":["A4L","A6L","Q5","A3","Q3","Q7","A5","A8","A1","A7"],"阿尔法·罗密欧":["Stelvio","ALFA 156","ALFA 166","Giulia GT"],"阿斯顿·马丁":["V8 Vantage","Cygnet","DB11","DB9","DBS"]},"B":{"本田":["CR-V","雅阁","思域","奥德赛","飞度","锋范","凌派","XR-V","缤智","杰德"],"奔驰":["C级","E级","GLA级","GLC级","GLK级","CLA级","S级","B级","A级","R级"],"宝马":["5系","3系","X1","1系","X5","X3","7系","2系旅行车","X6","3系GT"],"标志":["308","408","3008","2008","301","307","207","508","4008","5008"]},"D":{"大众":["朗逸","POLO","迈腾","高尔夫","速腾","帕萨特","途观","宝来","捷达","桑塔纳"],"DS":["DS 5","DS 5LS","DS 6","DS 3"]},"F":{"丰田":["凯美瑞","卡罗拉","汉兰达","RAV4","雷凌","普拉多","威驰","锐志","致炫","花冠"],"福特":["福克斯","蒙迪欧","福睿斯","翼虎","嘉年华","翼搏","锐界","Mustang","探险者","金牛座"]},"L":{"路虎":["揽胜极光","发现神行","发现","揽胜运动版","神行者","揽胜","揽胜星脉","揽胜新能源","揽胜运动版新能源","卫士"],"林肯":["MKC","MKZ","MKX","领航员","大陆","城市","航海家","MKS","MKT"]},"M":{"马自达":["Axela昂克赛拉","马自达6","CX-5","阿特兹","星骋","CX-4","马自达3","睿翼","CX-7","马自达2"],"MINI":["MINI","COUNTRYMAN","CLUBMAN","PACEMAN","COUPE"],"玛莎拉蒂":["Ghibli","总裁","Levante","GranTurismo","GranCabrio","Spyder"]},"R":{"日产":["轩逸","天籁","骐达","奇骏","逍客","阳光","LANNIA","蓝鸟","骊威","劲客","NV200"],"荣威":["350","RX5","360","550","i6","RX3","W5","RX8","950","750"],"瑞麒":["M1","G3","G5","G6","M5","派拉蒙"]},"T":{"特斯拉":["MODEL3","MODELS","MODELX"],"天马":["风驰","风锐","海狮","骏驰","英雄"]},"W":{"五菱":["宏光","荣光","之光","征程","鸿途","PN货车","荣光小卡"]},"X":{"雪佛兰":["科鲁兹","迈锐宝","赛欧","科沃兹","创酷","科帕奇","爱唯欧","迈锐宝XL","乐风","探界者"],"雪铁龙":["世嘉","爱丽舍","C3-XR","C4L","C5","C4世嘉","C2","天逸"]}}

一、何时使用

• 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。

• 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。

• 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

二、怎么使用

基本 API

<Cascader options={options} onChange={onChange} />

option 的基本架构就是：

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

所以这个玩意最难得就是处理收到的数据。
几个常见的 API ：

• onChange 选择完成后的回调
• changeOnSelect 当此项为 true 时，点选每级菜单选项值都会发生变化。
• disabled 禁用
• expandTrigger 次级菜单的展开方式，可选 'click' 和 'hover'
• options 可选项数据源
• placeholder 输入框占位文本
• showSearch 在选择框中显示搜索框

三、根据接口制作汽车品牌型号层级选择

import React, { Component } from 'react';
import axios from "axios";
import {Cascader} from 'antd';

export default class S2 extends Component {
    constructor(){
        super();
        this.state = {
            results : {}
        }
    }
    componentWillMount(){
        axios.get("http://192.168.2.250/allbs").then(data=>{
            this.setState({
                results : data.data
            })
        });
    }
    render() {      // 配置options
        const options = Object.keys(this.state.results).map(item =>({
            value: item,
            label: item,
            children : Object.keys(this.state.results[item]).map(_item=>({
                    value: _item,
                    label: _item,
                    children : this.state.results[item][_item].map(__item=>({
                        value: __item,
                        label: __item,
                    }))
                }))
        }));
        return (
            <div>
                <Cascader options={options} changeOnSelect  showSearch placeholder = '请选择'/>
            </div>
        )
    }
}

层级选择框.gif