antd級聯框Cascader動態加載的用法

一，官方文檔：https://ant.design/components/cascader-cn/#header

二，具體代碼（以根據產品類型獲取產品爲例）：

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


//級聯獲取產品類型
const getProductType= () => axios.post(config.HOST + '/work/getProductType', qs.stringify({
    userToken: JSON.parse(localStorage.getItem('user')).token,
})).then(function (response) {
    return response.data;
}).catch(function (error) {
    console.log(error);
});
//級聯根據產品類型獲取產品
const getProductOfType= (productTypeName) => axios.post(config.HOST + '/work/getProductOfType', qs.stringify({
    userToken: JSON.parse(localStorage.getItem('user')).token,
    productTypeName:productTypeName,
})).then(function (response) {
    return response.data;
}).catch(function (error) {
    console.log(error);
});

//創建form組件
const CollectionCreateForm = Form.create()(
    (props) => {
        const {productTypeOptions,getProductsLoadData,productDisplayRender} = props;
    
    return(
        <div>
            <form>
                <FormItem  >
                          {getFieldDecorator('minProduct', )
                                (
                                    <Cascader options={productTypeOptions}
                                              loadData={getProductsLoadData}
                                              displayRender={productDisplayRender}
                                              expandTrigger="hover"
                                     />
                                 )}
                </FormItem>
            </form>
        </div>
    )
)

//創建組件
class formDemo extends Component {
    state={
            productTypeOptions:[],//產品類型option
          }
}

//組件生命週期
componentDidMount() {
        this.getProducttypes(); //在渲染前調用
    }

//級聯獲取產品類型
getProducttypes=()=>{
    getProductType().then(res=>{
        const productTypeList = res.productTypeList;
            const productTypeOption = productTypeList&&productTypeList.map(productType=>productType.id? {
                     value:productType.id,
                     label:productType.name,
                     isLeaf:false,
                  }:"");
            this.setState({
                productTypeOptions:productTypeOption
            });
        });
    };

//級聯根據產品類型獲取產品
getProductsLoadData=(selectedOptions)=>{
     const targetOption = selectedOptions[selectedOptions.length - 1];
          getProductOfType(targetOption.label).then(res => {
           const productList = res.productList;
           targetOption.children = productList && productList.map(product => product.id ?
                    {
                        value: product.id,
                        label: product.name,
                        isLeaf: true,
                    } : "");
                this.setState({
                    productTypeOptions: [...this.state.productTypeOptions],
                });
            });
    }

//級聯選擇後的界面渲染
productDisplayRender = (label) => {
        return label[label.length - 1];
};

//渲染
 render() {
    <span>
        <CollectionCreateForm
           productTypeOptions={this.state.productTypeOptions}//產品級聯一級下拉框
           getProductsLoadData={this.getProductsLoadData}//產品級聯二級下拉框
           productDisplayRender={this.productDisplayRender}//產品級聯選擇框學則後的渲染函數
        />
    </span>
}

 三，要點說明：

（1），isLeaf爲true時，表示當層下拉框是最後一級下拉框，默認爲true；

（2），若有n級下拉框，可根據selectedOptions.length來做if判斷進行控制，它意味當前級聯框的級數。