React项目中使用 Ant Design - form实现简单Select 下拉多级联动

使用Ant Design中的Select实现二级三级联动下拉框

一、这个封装组件适用于函数组件及antd版本在4版本以上的项目

1.首先看下所需要的地区数据（第一张是专门处理过的数据，第二张图片是我们普遍的树形结构数据）

2.封装的Select组件（这里面对应的数据也就是第一张图的数据）

import { Form, Select } from 'antd';
import React, { useState, useEffect } from "react";
import RegionalData from "../common/RegionalData";
const { Option } = Select;
const { ProvinceData = [], CityData = {}, DistrictData = {} } = RegionalData
/**form-Form的方法 / region-是否显示区 / label-标题 / rules-是否必填 / province-传过来表示不必传 / city-传过来表示不必传 / district-传过来表示不必传*/
const AreaSelect = ({ form, region, label, rules, province, city, district }) => {
    const style = { display: 'inline-block', width: region ? 'calc(33.3% - 6px)' : 'calc(50% - 6px)' }
    return (<Form.Item label={<span className={rules && 'ant-form-item-required-span'}>{label}</span>} style={{ margin: 0 }}>
        <Form.Item name="province" style={style} rules={[{ required: province ? false : rules, message: "请选择省" }]}>
            <Select placeholder="请选择" onChange={() => { form.setFieldsValue({ city: undefined, district: undefined }) }} allowClear>
                {(ProvinceData || []).map((value) => <Option key={value.name}>{value.name}</Option>)}
            </Select>
        </Form.Item>
        <span style={{ display: 'inline-block', width: region ? 9 : 12 }} />
        <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.province !== currentValues.province}>
            {({ getFieldValue }) =>
                <Form.Item name="city" style={style} rules={[{ required: city ? false : rules, message: "请选择市" }]}>
                    <Select placeholder="请选择" onChange={() => { form.setFieldsValue({ district: undefined }) }} allowClear>
                        {((CityData || {})[getFieldValue('province')] || []).map((value) => <Option key={value.name}>{value.name}</Option>)}
                    </Select>
                </Form.Item>
            }
        </Form.Item>
        <span style={{ display: region ? 'inline-block' : '', width: 9 }} />
        {region && <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.city !== currentValues.city}>
            {({ getFieldValue }) =>
                <Form.Item name="district" style={style} rules={[{ required: district ? false : rules, message: "请选择区" }]}>
                    <Select placeholder="请选择" allowClear>
                        {(((DistrictData || {})[getFieldValue('province')] || {})[getFieldValue('city')] || []).map((value) => <Option key={value.name}>{value.name}</Option>)}
                    </Select>
                </Form.Item>
            }
        </Form.Item> }
    </Form.Item>)
}
export default AreaSelect;

 3.当我们的数据是树形结构的时可以直接吧上一张图里面的Select换成下面图片的省市区

            <Select placeholder="请选择" onChange={() => { form.setFieldsValue({ city: undefined, district: undefined}) }}>
                {(List || []).map((value) => <Option key={value.name}>{value.name}</Option>)}
            </Select>

                    <Select placeholder="请选择" onChange={() => { form.setFieldsValue({ district: undefined }) }}>
                        {(List || []).map((value) => {
                            if (value.name == getFieldValue('province')) {
                                return (value.children || []).map((values) => <Option key={values.name}>{values.name}</Option>)
                            } else {
                                return undefined
                            }
                        })}
                    </Select>

                    <Select placeholder="请选择">
                        {(List || []).map((value) => {
                            if (value.name == getFieldValue('province')) {
                                return (value.children || []).map((values) => {
                                    if (values.name == getFieldValue('city')) {
                                        return (values.children || []).map((values1) => <Option key={values1.name}>{values1.name}</Option>)
                                    } else {
                                        return undefined
                                    }
                                })
                            } else {
                                return undefined
                            }
                        })}
                    </Select>

.ant-form-item-required-span:not(
.ant-form-item-required-mark-optional
)::before {
  display: inline-block;
  margin-right: 4px;
  color: #ff4d4f;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: "*";
}

大家也可以自行优化改组件，添加或修改自己所需的功能