React Hooks 二次封装省市区街道4级联动组件

import React, { useState } from "react";
import FormItemPro from 'components/FormItemPro';
import {
  FormControl, Row, Col, Label, Button, Select, Loading, Modal
} from "tinper-bee";
import request from "utils/request";
const Option = Select.Option;
const XxxDistpicker = ({ handleAddressChoose }) => {
  const [isShowDistpicker, setIsShowDistpicker] = useState(false);
  const [country, setCountry] = useState({ code: '0001', name: '中国' });       //保存国家状态
  const [province, setProvince] = useState({ code: "00010005", name: '广东' }); //保存省份状态
  const [city, setCity] = useState({ code: '00010102', name: '深圳' });         //保存城市状态
  const [district, setDistrict] = useState({ code: '0001010202', name: '南山' }); //保存行政区状态
  const [data, setData] = useState([])  //当前选择的下拉框所需要的数据

  // 发送请求获取下拉框所需的数据
  const indexedDist = ['country', 'province', 'city', 'district'];
  const handleFocus = async dist => {
    const index = indexedDist.findIndex(item => item === dist);
    const param = { parentCode: '0', level: '0' }
    if (index !== 0) {
      param.parentCode = eval(indexedDist[index - 1])['code'];
    }
    const response = await request(`${GROBAL_HTTP_BASE}/region/select`, {
      method: 'get',
      data: {},
      param
    });
    if (response && response.data && response.data.code && !Number(response.data.code.code)) {
      setData(response.data.bo);  //为下拉框输送数据
      // 清空当前区域之下的所有数据
      const index = indexedDist.findIndex(item=> item === dist);
      const distRest = indexedDist.slice(index+1);
      if(distRest.length) {
        distRest.map(item=>`set${item.charAt(0).toUpperCase() + item.slice(1)}`).forEach(item=> eval(item)({ code:'', name:'' }))
      }
    }
  }

  // 【确定】点击事件
  const handleOkAction = () => {
    setIsShowDistpicker(false);
    handleAddressChoose({country, province, city, district});
  }

  return (
    <div className="xxx-dist-picker">
        <FormControl
          className= "xxx-dist-picker-address"
          value={ country.name +province.name+ city.name+ district.name }
          onSearch={v => setIsShowDistpicker(true) }
          onChange={v => setIsShowDistpicker(true) }
          type="search"
        />
      <Modal show={isShowDistpicker} size="sm" onHide={() => setIsShowDistpicker(false)} backdrop={"static"}>
        <Modal.Header closeButton>
          <Modal.Title>地区选择器</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Row className="form-panel">
            <Col lg={12} md={12} xs={12} sm={12}>
              <FormItemPro>
                <Label>国家/地区</Label>
                <Select
                  disabled={true}
                  placeholder='请选择国家/地区'
                  onFocus={() => handleFocus('country')}
                  onChange={value => value && setCountry(JSON.parse(value))}
                  allowClear={true}
                  optionFilterProp="children"
                  value={country.name}
                >
                  {
                    data.map((item) =>
                      <Option key={item.code} value={item.code} item={item} >
                        {item.desc3}
                      </Option>)
                  }
                </Select>
              </FormItemPro>
            </Col>
            <Col lg={12} md={12} xs={12} sm={12}>
              <FormItemPro>
                <Label>省份/州</Label>
                <Select
                  showSearch
                  optionFilterProp="children"
                  placeholder='请先选择省份/州'
                  onFocus={() => handleFocus('province')}
                  onChange={value => value && setProvince(JSON.parse(value))}
                  value={province.name}
                >
                  {
                    data.map((item) =>
                      <Option key={item.code} value={JSON.stringify({ code: item.code, name: item.desc3 })} >
                        {item.desc3}
                      </Option>)
                  }
                </Select>
              </FormItemPro>
            </Col>
            <Col lg={12} md={12} xs={12} sm={12}>
              <FormItemPro>
                <Label>城市</Label>
                <Select
                  showSearch
                  optionFilterProp="children"
                  placeholder='请先选择城市'
                  onFocus={() => handleFocus('city')}
                  onChange={value => value && setCity(JSON.parse(value))}
                  value={city.name}
                >
                  {
                    data.map((item) =>
                      <Option key={item.code} value={JSON.stringify({ code: item.code, name: item.desc3 })} >
                        {item.desc3}
                      </Option>)
                  }
                </Select>
              </FormItemPro>
            </Col>
            <Col lg={12} md={12} xs={12} sm={12}>
              <FormItemPro>
                <Label>区</Label>
                <Select
                  showSearch
                  optionFilterProp="children"
                  placeholder='请先选择区'
                  onFocus={() => handleFocus('district')}
                  onChange={value => value && setDistrict(JSON.parse(value))}
                  value={district.name}
                >
                  {
                    data.map((item) =>
                      <Option key={item.code} value={JSON.stringify({ code: item.code, name: item.desc3 })} >
                        {item.desc3}
                      </Option>)
                  }
                </Select>
              </FormItemPro>
            </Col>
            <Col lg={12} md={12} xs={12} sm={12}>
              <FormItemPro>
                <Label>详细地址</Label>
                <FormControl value={ country.name +' ' +province.name+' ' + city.name+' ' + district.name } />
              </FormItemPro>
            </Col>
          </Row>
        </Modal.Body>
        <Modal.Footer className="text-center">
          <Button
            colors="primary"
            style={{ marginRight: 10 }}
            onClick={ handleOkAction }
          >
            确认
          </Button>
          <Button
            shape="border"
            colors="primary"
            onClick={() => setIsShowDistpicker(false)}
          >
            取消
          </Button>
        </Modal.Footer>
      </Modal>
      {/**/}
    </div>
  );
};

export default XxxDistpicker;