antd二级联动异步加载

/**
 * Created by Admin on 2016/9/19.
 * 批量导入
 */
import React, {Component, PropTypes} from "react";
import {Link} from "react-router";
import {Upload, Icon, Select, Row, Col, Button, notification, Card, Cascader} from "antd";
import CustomBreadcrumb from "../CustomBreadcrumb";
import Utils from "../../common/Utils";
import moment from "moment";
 
export default class ExportData extends Component {
 
    state = {
        inputValue: '',
       // templateUrl: '/assets/templatefile/行政处罚模板.xlsx',
        options: [{
            value: 'TI_B_XZXK_REPORTING',
            label: '行政许可',
            isLeaf: false,
        }, {
            value: 'TI_B_XZCF_REPORTING',
            label: '行政处罚',
            isLeaf: false,
        }],
    };
 
    fetchSelectData = (tableName) => {
        // debugger;
        this.setState({loading: true});
        const query = {
            tableName: tableName
        };
        this.props.exportDataService.findList(query)
            .then(arr => {
                const options = this.state.options.map(item => {
                    if (item.value === tableName) {
                        item.children = arr.map(value => ({value: value, label: value, isLeaf: true}));
                    }
                    return item;
                });
                this.setState({options: options});
            });
        // .catch(e => this.setState({loading: false}));
        // Utils.pushLink(this.props.location.pathname, query);
    };
 
    onChange = (values, selectedOptions) => {
        console.log(values, selectedOptions);
 
        this.setState({
            inputValue: selectedOptions.map(o => o.label).join(', '),
        });
    };
 
    loadData = (selectedOptions) => {
        console.log('loadData', selectedOptions);
 
        const obj = selectedOptions[0];
        if (obj && !obj.isLeaf) {
            this.fetchSelectData(obj.value);
        }
        // const targetOption = selectedOptions[selectedOptions.length - 1];
        // targetOption.loading = true;
        //
        // // load options lazily
        // setTimeout(() => {
        //     targetOption.loading = false;
        //     targetOption.children = [{
        //         label: `${targetOption.label} Dynamic 1`,
        //         value: 'dynamic1',
        //     }, {
        //         label: `${targetOption.label} Dynamic 2`,
        //         value: 'dynamic2',
        //     }];
        //     this.setState({
        //         options: [...this.state.options],
        //     });
        // }, 1000);
    };
 
    render() {
        const breadcrumbItems = [{
            name: '在线填报'
        }, {
            link: '/reporting/data',
            name: '数据维护'
        }, {
            name: '导出错误数据'
        }];
        console.log(this.state);
 
        let downloadElement ='';
        //需要注意这里的取值条件可能有不满足的情况
        if(this.state.inputValue && this.state.inputValue.length>6){
           const myTime = this.state.inputValue.substring(5);
             downloadElement = myTime
                ? <a href={`/inapi/reportingXzcf/export?time=${myTime}`}><Button type="primary" size="large">导出错误数据</Button></a>
                : '';
        }
 
        return (
            <div>
                <CustomBreadcrumb global={this.props.global}
                                  globalService={this.props.globalService}
                                  location={this.props.location}
                                  items={breadcrumbItems}/>
                <div className="block-box">
                    <div className="block-box-body clearfix">
 
                        <Row gutter={24} style={{marginBottom: "40px", marginLeft: "20px"}}>
                            <Col className="gutter-row" span={12}>
                                <div className="ant-row" style={{marginBottom: "40px"}}>
                                    <div className="ant-col-5 ant-form-item-label">
                                        <label htmlFor="CF_WSH" className="ant-form-item-required">请选择</label>
                                    </div>
                                    <Cascader
                                        style={{width: '250px'}}
                                        options={this.state.options}
                                        loadData={this.loadData}
                                        onChange={this.onChange}
                                        changeOnSelect
                                    />
                                </div>
                            </Col>
 
                            <Col className="gutter-row" span={5}>
                                {downloadElement}
                            </Col>
                        </Row>
                    </div>
                </div>
            </div>
        );
    }
 
}

效果图展示：