onemap-cdzy/src/components/common/ZoneSelector/index.js

import { useState, useEffect } from 'react'
import CommonApi from '../../../utils/apis/CommonApi';
import { Select, Space } from 'antd';
import _ from 'lodash';
export default function ZoneSelector(props) {
    const { value, onChange } = props;

    const [firstDatas, setFirstDatas] = useState([]);
    const [firstValue, setFirstValue] = useState("-1");
    const [secDatas, setSecDatas] = useState([]);
    const [secValue, setSecValue] = useState("-1");

    useEffect(() => {
        CommonApi.area().then(resp => {
            setFirstDatas(resp.data);
        })
    }, [])

    useEffect(() => {
        if (firstValue) {
            CommonApi.area(firstValue).then(resp => {
                setSecDatas(resp.data);
            })
        } else {
            setSecDatas([]);
        }
    }, [firstValue])

    return <Space>
        <Select value={firstValue} onChange={value => {
            setFirstValue(value);
            setSecValue("-1");
            onChange?.(value);
        }} style={{
            width: 150
        }} options={[{
            label: '全部',
            value: "-1"
        }, ..._.uniqBy(firstDatas, 'shortCode')?.map(item => {
            return {
                key: item.shortCode,
                label: item.name,
                value: item.shortCode
            }
        })]}></Select>
        {firstValue !== "-1" && <Select value={secValue} onChange={value => {
            setSecValue(value);
            if (value) {
                onChange?.(value);
            } else {
                onChange?.(firstValue);
            }
        }} style={{
            width: 150
        }} options={[{
            label: '全部',
            value: "-1"
        }, ..._.uniqBy(secDatas, 'shortCode')?.map(item => {
            return {
                key: item.shortCode,
                label: item.name,
                value: item.shortCode
            }
        })]}></Select>}
    </Space>;
}