antd省市區級聯

import React, { useState } from 'react'
import { Cascader } from 'antd'
import options from '../../utils/cities'

export default function AreaCascader({ value = [], onChange, getPopupContainer }) {
  const [cascader, setCascader] = useState([])
  
  const handleChange = (value, list) => {
    onChange(value)
    console.log(value)
    setCascader(value)
    console.log(list)
  }

  return (
    <div>
      <Cascader
        value={value || cascader}
        options={options}
        fieldNames={{value: 'code'}}
        onChange={handleChange}
        placeholder="選擇所屬城市"
        style={{ width: 300 }}
        getPopupContainer={getPopupContainer}
      />
    </div>
  )
}

//根據省市區編碼查詢省市區
const findAreaText = (location) => {
  let result = []
  for (let i = 0; i < areaOptions.length; i++) {
    if (areaOptions[i].code === location[0] + '') {
      result.push(areaOptions[i].label)
    }
    for (let j = 0; j < areaOptions[i].children.length; j++) {
      if (areaOptions[i].children[j].code === location[1] + '') {
        result.push(areaOptions[i].children[j].label)
      }
      if (Array.isArray(areaOptions[i].children[j].children)) {
        for (let z = 0; z < areaOptions[i].children[j].children.length; z++) {
          if (
            areaOptions[i].children[j].children[z].code ===
            location[2] + ''
          ) {
            result.push(areaOptions[i].children[j].children[z].label)
          }
        }
      }
    }
  }
  return result
}

數據來源：https://github.com/heerey525/antdCascaderDate/blob/master/src/cities.js

https://github.com/heerey525/antdCascaderDate