react使用antd级联实现省市区选择

最新推荐文章于 2024-02-06 10:49:53 发布

guanguan0_0

最新推荐文章于 2024-02-06 10:49:53 发布

阅读量8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签：省市区选择级联选择 antd react

本文链接：https://blog.youkuaiyun.com/guanguan0_0/article/details/98872125

React 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个基于React和Ant Design的地址选择器组件实现。该组件通过递归加载中国省份、城市和区县数据，支持默认值设置和值变化通知。文章详细展示了组件的构造、数据加载逻辑及与父组件的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
          });
        });
      });
    });
  }
}