一,官方文檔: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判斷進行控制,它意味當前級聯框的級數。