Ant Design 级联选择的一种写法

  简单记录类似省、市、区或品牌、车系、车型等多级结构，级联选择添加并展示的一种写法：

import React from 'react';
import {Button, Form, message, Row, Tag,Select,Col} from 'antd';
import request from "../../../../utils/request";
const FormItem = ;
const Option = ;

class CarSeriesCascader extends  {

    constructor(props) {
        super(props);
         = {
            defaultBrandList:[],
            selectedCarModelList:  ?  : [],
            brandCode:null,
            carModelList:[],
            carId:null,
            modelCode:null,
            modelName:null
        }
    }

    componentDidMount() {
      let promise = request(`/car/getBrandList`);
      (result =>{
        if(result != null){
          ({
            defaultBrandList:result
          });
        }else{
          ("获取品牌数据失败");
        }
      }).catch(err => {
          ("获取品牌数据失败");
        });
      // ({
      //   selectedCarModelList:( ?  : [])
      // });
      ();
    }

    getLimitList = (selectedCarModelList) => {
        let limitList = ((carModel,index) => {
            let limitItem = {};
             = ;
             = ;
             = ;
            return limitItem;
        });
        return limitList;
    }


    addCarModel = () => {
        let addCarModel = {};
        let selectedCarModelList = ;
        // 选中车型号
        if ( !== null) {
            // 检查车型是否已选中
            for (let index =  - 1; index >= 0; index--) {
                let carModel = [index];
                if ( == ) {
                    ("车型已在已选车型中");
                    return;
                }
            }
           = ;
           = ;
           = ;
          (addCarModel);
        } else {
            return;
        }
        (selectedCarModelList);
        ({
          selectedCarModelList
        });
    }

    handleChange = (selectedCarModelList) => {
        if () {
            let limitList = (selectedCarModelList);
            (limitList);
        }
    }

    deleteTag = (limitCode) => {
      debugger
       let selectedCarModelList = ;
       selectedCarModelList = (carModel => !( === limitCode));
        (selectedCarModelList);
        ({selectedCarModelList});
    }

  //品牌变化
  brandChange = (brandName) => {
    ((item, index) => {
      if ( == brandName) {
        let promise = request(`/car/getModelList?brandCode=` + );
        (result =>{
          if(result != null){
            ({
              brandCode:,
              carModelList:result
            });
          }else{
            ("获取车型数据失败");
          }
        }).catch(err => {
          ("获取车型数据失败:");
        });
      }
    });
  }

  //车型变化
  modelChange = (modelName) => {
    ({modelName: null});
    let _this = this;
    ((item, index) => {
      if ( == modelName) {
        (item);
        ({
        modelCode : ,
        carId : ,
        modelName : 
        });
      }
    });
  }

    render() {
      const {getFieldDecorator} = ;
      //品牌名称列表
      let allBrandListOption =  != null ? ((item, index) => {
        return <Option value={} key={index}>{}</Option>;
      }) : null;

      //车型名称列表
      let allModelListOption =  != null ? ((item, index) => {
        return <Option value={} key={index}>{}</Option>;
      }) : null;

        const {
            closable=true,
        } = ;

        const existCarModel = [];
        const limitList = ();
        for (let index =  - 1; index >= 0; index--) {
            let limitItem = limitList[index];
            (<Tag
                key={}
                closable={closable}
                onClose={(e) => {
                    ();
                    ();
                }}
            >{}</Tag>);
        }

        return (
            <div>
                <Row>
                    <FormItem  >
                      {getFieldDecorator('brandName', {
                        rules: [{
                          message: '请选择品牌'
                        }],
                      })(
                        <Select
                          placeholder="品牌"
                          dropdownMatchSelectWidth={false}
                          onChange={}
                          style={{ marginRight: 10, width: 100 }}>
                          <Option value={null}>选择品牌</Option>
                          {allBrandListOption}
                        </Select>
                      )}
                      {getFieldDecorator('modelName', {
                        rules: [{
                          message: '请选择车型'
                        }],
                      })(
                        <Select
                          placeholder="车型"
                          dropdownMatchSelectWidth={false}
                          onChange={}
                          style={{ marginRight: 10, width: 260 }}>
                          <Option value={null}>选择车型</Option>
                          {allModelListOption}
                        </Select>
                      )}
                      <Button type={"primary"} icon={"plus"} onClick={}>添加车型</Button>
                    </FormItem>
                </Row>
                <Row>
                    {existCarModel}
                </Row>
            </div>
        )
    }
}

export default ()(CarSeriesCascader);