Ant Design 級聯選擇的一種寫法

  簡單記錄類似省、市、區或品牌、車系、車型等多級結構，級聯選擇添加並展示的一種寫法：

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

class CarSeriesCascader extends React.Component {

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

    componentDidMount() {
      let promise = request(`/car/getBrandList`);
      promise.then(result =>{
        if(result != null){
          this.setState({
            defaultBrandList:result
          });
        }else{
          message.error("獲取品牌數據失敗");
        }
      }).catch(err => {
          message.error("獲取品牌數據失敗");
        });
      // this.setState({
      //   selectedCarModelList:(this.props.carModelList ? this.props.carModelList : [])
      // });
      this.handleChange(this.state.selectedCarModelList);
    }

    getLimitList = (selectedCarModelList) => {
        let limitList = selectedCarModelList.map((carModel,index) => {
            let limitItem = {};
            limitItem.modelName = carModel.modelName;
            limitItem.modelCode = carModel.modelCode;
            limitItem.carId = carModel.carId;
            return limitItem;
        });
        return limitList;
    }


    addCarModel = () => {
        let addCarModel = {};
        let selectedCarModelList = this.state.selectedCarModelList;
        // 選中車型號
        if (this.state.carId !== null) {
            // 檢查車型是否已選中
            for (let index = this.state.selectedCarModelList.length - 1; index >= 0; index--) {
                let carModel = this.state.selectedCarModelList[index];
                if (carModel.carId == this.state.carId) {
                    message.error("車型已在已選車型中");
                    return;
                }
            }
          addCarModel.carId = this.state.carId;
          addCarModel.modelCode = this.state.modelCode;
          addCarModel.modelName = this.state.modelName;
          selectedCarModelList.push(addCarModel);
        } else {
            return;
        }
        this.handleChange(selectedCarModelList);
        this.setState({
          selectedCarModelList
        });
    }

    handleChange = (selectedCarModelList) => {
        if (this.props.onChange) {
            let limitList = this.getLimitList(selectedCarModelList);
            this.props.onChange(limitList);
        }
    }

    deleteTag = (limitCode) => {
      debugger
       let selectedCarModelList = this.state.selectedCarModelList;
       selectedCarModelList = selectedCarModelList.filter(carModel => !(carModel.modelCode === limitCode));
        this.handleChange(selectedCarModelList);
        this.setState({selectedCarModelList});
    }

  //品牌變化
  brandChange = (brandName) => {
    this.state.defaultBrandList.map((item, index) => {
      if (item.brandName == brandName) {
        let promise = request(`/car/getModelList?brandCode=` + item.brandCode);
        promise.then(result =>{
          if(result != null){
            this.setState({
              brandCode:item.brandCode,
              carModelList:result
            });
          }else{
            message.error("獲取車型數據失敗");
          }
        }).catch(err => {
          message.error("獲取車型數據失敗:");
        });
      }
    });
  }

  //車型變化
  modelChange = (modelName) => {
    this.props.form.setFieldsValue({modelName: null});
    let _this = this;
    this.state.carModelList.map((item, index) => {
      if (item.modelName == modelName) {
        console.log(item);
        this.setState({
        modelCode : item.modelCode,
        carId : item.carId,
        modelName : item.modelName
        });
      }
    });
  }

    render() {
      const {getFieldDecorator} = this.props.form;
      //品牌名稱列表
      let allBrandListOption = this.state.defaultBrandList != null ? this.state.defaultBrandList.map((item, index) => {
        return <Option value={item.brandName} key={index}>{item.brandName}</Option>;
      }) : null;

      //車型名稱列表
      let allModelListOption = this.state.carModelList != null ? this.state.carModelList.map((item, index) => {
        return <Option value={item.modelName} key={index}>{item.modelName}</Option>;
      }) : null;

        const {
            closable=true,
        } = this.props;

        const existCarModel = [];
        const limitList = this.getLimitList(this.state.selectedCarModelList);
        for (let index = limitList.length - 1; index >= 0; index--) {
            let limitItem = limitList[index];
            existCarModel.push(<Tag
                key={limitItem.modelCode}
                closable={closable}
                onClose={(e) => {
                    e.preventDefault();
                    this.deleteTag(limitItem.modelCode);
                }}
            >{limitItem.modelName}</Tag>);
        }

        return (
            <div>
                <Row>
                    <FormItem  >
                      {getFieldDecorator('brandName', {
                        rules: [{
                          message: '請選擇品牌'
                        }],
                      })(
                        <Select
                          placeholder="品牌"
                          dropdownMatchSelectWidth={false}
                          onChange={this.brandChange}
                          style={{ marginRight: 10, width: 100 }}>
                          <Option value={null}>選擇品牌</Option>
                          {allBrandListOption}
                        </Select>
                      )}
                      {getFieldDecorator('modelName', {
                        rules: [{
                          message: '請選擇車型'
                        }],
                      })(
                        <Select
                          placeholder="車型"
                          dropdownMatchSelectWidth={false}
                          onChange={this.modelChange}
                          style={{ marginRight: 10, width: 260 }}>
                          <Option value={null}>選擇車型</Option>
                          {allModelListOption}
                        </Select>
                      )}
                      <Button type={"primary"} icon={"plus"} onClick={this.addCarModel}>添加車型</Button>
                    </FormItem>
                </Row>
                <Row>
                    {existCarModel}
                </Row>
            </div>
        )
    }
}

export default Form.create()(CarSeriesCascader);