import { Component } from 'react';
import { Cascader } from 'antd';
import * as addressRequest from '../../services/address';
export default class AreaPicker extends Component {
constructor(props) {
super(props);
this.state = {
options: [],
defaultValue: this.props.value
};
}
componentDidMount() {
if (this.state.defaultValue.length>0) {
/**有默认值时获取所有列表*/
this.getAllOpt();
} else {
this.getProvinceOpt();
}
}
render() {
return (
<Cascader
options={this.state.options}
defaultValue={this.state.defaultValue}
loadData={this.loadData.bind(this)}
onChange={this.onChange.bind(this)}
style={{ width: '100%' }}
changeOnSelect
placeholder="请选择"
/>
);
}
onChange = (value, selectedOptions) => {
/**给父组件通知值变化*/
this.props.onChange(value);
};
loadData = selectedOptions => {
let targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
/**获取市列表 */
if (selectedOptions.length == 1) {
addressRequest.getCityList(targetOption.value).then(res => {
targetOption.loading = false;
let list = [];
res.forEach(el =>
list.push({
label: el.value,
value: el.code,
isLeaf: false
})
);
targetOption.children = list;
this.setState({
options: [...this.state.options]
});
});
} else {
/**获取区列表 */
addressRequest.getRegionList(targetOption.value).then(res => {
targetOption.loading = false;
let list = [];
res.forEach(el =>
list.push({
label: el.value,
value: el.code
})
);
targetOption.children = list;
this.setState({
options: [...this.state.options]
});
});
}
};
/**没有默认值时初始化省列表 */
getProvinceOpt() {
addressRequest.getProvinceList('0').then(res => {
let list = [];
res.forEach(el => {
list.push({
label: el.value,
value: el.code,
isLeaf: false
});
});
this.setState({
options: list
});
});
}
/**有默认选中的值时对数据进行初始化 */
getAllOpt() {
let list1 = [],
list2 = [],
list3 = [];
/**区获取 */
addressRequest.getRegionList(this.state.defaultValue[1]).then(res => {
res.forEach(el =>
list3.push({
label: el.value,
value: el.code
})
);
/**市获取 */
addressRequest.getCityList(this.state.defaultValue[0]).then(res => {
res.forEach(el =>
list2.push({
label: el.value,
value: el.code,
isLeaf: false,
children: this.state.defaultValue[1] == el.code ? list3 : null
})
);
/**省获取 */
addressRequest.getProvinceList('0').then(res => {
res.forEach(el => {
list1.push({
label: el.value,
value: el.code,
isLeaf: false,
children: this.state.defaultValue[0] == el.code ? list2 : null
});
});
this.setState({
options: list1
});
});
});
});
}
}
| 
转播
