React 省市查詢組件完整代碼

一、地區文件

二、Antd配合使用

三、實現效果

一、地區文件

下載地址：全國省市區數據_JSON格式_SQL格式

export const chinaArea = {0: {1: '北京',2: '天津',3: '河北省',4: '山西省',5: '內蒙古自治區',6: '遼寧省',7: '吉林省',8: '黑龍江省',9: '上海',10: '江蘇省',11: '浙江省',12: '安徽省',13: '福建省',14: '江西省',15: '山東省',16: '河南省',17: '湖北省',18: '湖南省',19: '廣東省',20: '廣西壯族自治區',21: '海南省',22: '重慶',23: '四川省',24: '貴州省',25: '云南省',26: '西藏自治區',27: '陜西省',28: '甘肅省',29: '青海省',30: '寧夏回族自治區',31: '新疆維吾爾自治區',32: '臺灣',33: '香港特別行政區',34: '澳門特別行政區',35: '海外'},1: {36: '北京市'},2: {37: '天津市'},3: {38: '石家莊市',39: '唐山市',40: '秦皇島市',41: '邯鄲市',42: '邢臺市',43: '保定市',44: '張家口市',45: '承德市',46: '滄州市',47: '廊坊市',48: '衡水市'},4: {49: '太原市',50: '大同市',51: '陽泉市',52: '長治市',53: '晉城市',54: '朔州市',55: '晉中市',56: '運城市',57: '忻州市',58: '臨汾市',59: '呂梁市'},5: {60: '呼和浩特市',61: '包頭市',62: '烏海市',63: '赤峰市',64: '通遼市',65: '鄂爾多斯市',66: '呼倫貝爾市',67: '巴彥淖爾市',68: '烏蘭察布市',69: '興安盟',70: '錫林郭勒盟',71: '阿拉善盟'},6: {72: '沈陽市',73: '大連市',74: '鞍山市',75: '撫順市',76: '本溪市',77: '丹東市',78: '錦州市',79: '營口市',80: '阜新市',81: '遼陽市',82: '盤錦市',83: '鐵嶺市',84: '朝陽市',85: '葫蘆島市'},7: {86: '長春市',87: '吉林市',88: '四平市',89: '遼源市',90: '通化市',91: '白山市',92: '松原市',93: '白城市',94: '延邊朝鮮族自治州'},8: {95: '哈爾濱市',96: '齊齊哈爾市',97: '雞西市',98: '鶴崗市',99: '雙鴨山市',100: '大慶市',101: '伊春市',102: '佳木斯市',103: '七臺河市',104: '牡丹江市',105: '黑河市',106: '綏化市',107: '大興安嶺地區'},9: {108: '上海市'},10: {109: '南京市',110: '無錫市',111: '徐州市',112: '常州市',113: '蘇州市',114: '南通市',115: '連云港市',116: '淮安市',117: '鹽城市',118: '揚州市',119: '鎮江市',120: '泰州市',121: '宿遷市'},11: {122: '杭州市',123: '寧波市',124: '溫州市',125: '嘉興市',126: '湖州市',127: '紹興市',128: '金華市',129: '衢州市',130: '舟山市',131: '臺州市',132: '麗水市'},12: {133: '合肥市',134: '蕪湖市',135: '蚌埠市',136: '淮南市',137: '馬鞍山市',138: '淮北市',139: '銅陵市',140: '安慶市',141: '黃山市',142: '滁州市',143: '阜陽市',144: '宿州市',145: '六安市',146: '亳州市',147: '池州市',148: '宣城市'},13: {149: '福州市',150: '廈門市',151: '莆田市',152: '三明市',153: '泉州市',154: '漳州市',155: '南平市',156: '龍巖市',157: '寧德市'},14: {158: '南昌市',159: '景德鎮市',160: '萍鄉市',161: '九江市',162: '新余市',163: '鷹潭市',164: '贛州市',165: '吉安市',166: '宜春市',167: '撫州市',168: '上饒市'},15: {169: '濟南市',170: '青島市',171: '淄博市',172: '棗莊市',173: '東營市',174: '煙臺市',175: '濰坊市',176: '濟寧市',177: '泰安市',178: '威海市',179: '日照市',180: '萊蕪市',181: '臨沂市',182: '德州市',183: '聊城市',184: '濱州市',185: '菏澤市'},16: {186: '鄭州市',187: '開封市',188: '洛陽市',189: '平頂山市',190: '安陽市',191: '鶴壁市',192: '新鄉市',193: '焦作市',194: '濮陽市',195: '許昌市',196: '漯河市',197: '三門峽市',198: '南陽市',199: '商丘市',200: '信陽市',201: '周口市',202: '駐馬店市'},17: {203: '武漢市',204: '黃石市',205: '十堰市',206: '宜昌市',207: '襄陽市',208: '鄂州市',209: '荊門市',210: '孝感市',211: '荊州市',212: '黃岡市',213: '咸寧市',214: '隨州市',215: '恩施土家族苗族自治州'},18: {216: '長沙市',217: '株洲市',218: '湘潭市',219: '衡陽市',220: '邵陽市',221: '岳陽市',222: '常德市',223: '張家界市',224: '益陽市',225: '郴州市',226: '永州市',227: '懷化市',228: '婁底市',229: '湘西土家族苗族自治州'},19: {230: '廣州市',231: '韶關市',232: '深圳市',233: '珠海市',234: '汕頭市',235: '佛山市',236: '江門市',237: '湛江市',238: '茂名市',239: '肇慶市',240: '惠州市',241: '梅州市',242: '汕尾市',243: '河源市',244: '陽江市',245: '清遠市',246: '東莞市',247: '中山市',248: '東沙群島',249: '潮州市',250: '揭陽市',251: '云浮市'},20: {252: '南寧市',253: '柳州市',254: '桂林市',255: '梧州市',256: '北海市',257: '防城港市',258: '欽州市',259: '貴港市',260: '玉林市',261: '百色市',262: '賀州市',263: '河池市',264: '來賓市',265: '崇左市'},21: {266: '海口市',267: '三亞市',268: '三沙市'},22: {269: '重慶市'},23: {270: '成都市',271: '自貢市',272: '攀枝花市',273: '瀘州市',274: '德陽市',275: '綿陽市',276: '廣元市',277: '遂寧市',278: '內江市',279: '樂山市',280: '南充市',281: '眉山市',282: '宜賓市',283: '廣安市',284: '達州市',285: '雅安市',286: '巴中市',287: '資陽市',288: '阿壩藏族羌族自治州',289: '甘孜藏族自治州',290: '涼山彝族自治州'},24: {291: '貴陽市',292: '六盤水市',293: '遵義市',294: '安順市',295: '銅仁市',296: '黔西南布依族苗族自治州',297: '畢節市',298: '黔東南苗族侗族自治州',299: '黔南布依族苗族自治州'},25: {300: '昆明市',301: '曲靖市',302: '玉溪市',303: '保山市',304: '昭通市',305: '麗江市',306: '普洱市',307: '臨滄市',308: '楚雄彝族自治州',309: '紅河哈尼族彝族自治州',310: '文山壯族苗族自治州',311: '西雙版納傣族自治州',312: '大理白族自治州',313: '德宏傣族景頗族自治州',314: '怒江傈僳族自治州',315: '迪慶藏族自治州'},26: {316: '拉薩市',317: '昌都市',318: '山南地區',319: '日喀則市',320: '那曲地區',321: '阿里地區',322: '林芝市'},27: {323: '西安市',324: '銅川市',325: '寶雞市',326: '咸陽市',327: '渭南市',328: '延安市',329: '漢中市',330: '榆林市',331: '安康市',332: '商洛市'},28: {333: '蘭州市',334: '嘉峪關市',335: '金昌市',336: '白銀市',337: '天水市',338: '武威市',339: '張掖市',340: '平涼市',341: '酒泉市',342: '慶陽市',343: '定西市',344: '隴南市',345: '臨夏回族自治州',346: '甘南藏族自治州'},29: {347: '西寧市',348: '海東市',349: '海北藏族自治州',350: '黃南藏族自治州',351: '海南藏族自治州',352: '果洛藏族自治州',353: '玉樹藏族自治州',354: '海西蒙古族藏族自治州'},30: {355: '銀川市',356: '石嘴山市',357: '吳忠市',358: '固原市',359: '中衛市'},31: {360: '烏魯木齊市',361: '克拉瑪依市',362: '吐魯番市',363: '哈密地區',364: '昌吉回族自治州',365: '博爾塔拉蒙古自治州',366: '巴音郭楞蒙古自治州',367: '阿克蘇地區',368: '克孜勒蘇柯爾克孜自治州',369: '喀什地區',370: '和田地區',371: '伊犁哈薩克自治州',372: '塔城地區',373: '阿勒泰地區'},32: {374: '臺北市',375: '高雄市',376: '臺南市',377: '臺中市',378: '金門縣',379: '南投縣',380: '基隆市',381: '新竹市',382: '嘉義市',383: '新北市',384: '宜蘭縣',385: '新竹縣',386: '桃園縣',387: '苗栗縣',388: '彰化縣',389: '嘉義縣',390: '云林縣',391: '屏東縣',392: '臺東縣',393: '花蓮縣',394: '澎湖縣',395: '連江縣'},33: {396: '香港島',397: '九龍',398: '新界'},34: {399: '澳門半島',400: '離島'},35: {401: '海外'}
}

二、Antd配合使用

/*** @author Dragon Wu* @since 2024/7/4 10:37*/
import React, {useEffect} from "react";
import {Select, Tooltip} from 'antd';
import {useState} from "react";
import {chinaArea} from "@/store/json/chinaArea";
import useWindowSize from "@/hooks/pageParams/useWindowSize";
import {widthSmallLimit} from "@/config/setting/pageSetting";const provinceData: string[] = Object.values(chinaArea[0]);const ProvinceAreaSelect: React.FC<{ onChange: Function, value?: string }> =React.memo(({onChange, value}) => {/* 加載數據 */const [loaded, setLoaded] = useState<boolean>(false)useEffect(() => {if (value && (!loaded)) {const values: string[] = value.split("，")setProvince(values[0])const num: number = provinceData.indexOf(values[0]);if (num > -1) {setCityData(Object.values(chinaArea[num + 1]))setProvinceIndex(num)}if (values.length > 1) {setCity(values[1])const indexCity = Object.values(chinaArea[num + 1]).indexOf(values[1]);if (indexCity > -1) {setCityIndex(indexCity)}}setLoaded(true)}}, [value])const [provinceIndex, setProvinceIndex] = useState<number>(0)const [province, setProvince] = useState<string>("")const [city, setCity] = useState<string>("")const [cityIndex, setCityIndex] = useState<number>(0)const [cityData, setCityData] = useState<string[]>([])const windowSize = useWindowSize()const onChangeProvince = (e: number) => {onChange(provinceData[e])setProvince(provinceData[e])setProvinceIndex(e)setCity("")setCityData(Object.values(chinaArea[e + 1]))}const onChangeCity = (e: number) => {onChange(province + "，" + cityData[e])setCity(cityData[e])setCityIndex(e)}return (<div style={{width: "100%", display: "flex", justifyContent: "space-between", flexWrap: "wrap"}}><Tooltip title={"選擇您的省份"}><Selectplaceholder={"選擇省"}showSearchvalue={province ? provinceIndex : undefined}style={{width: windowSize.clientWidth > widthSmallLimit ? "48%" : "100%"}}options={provinceData.map((item: string, index: number) => ({label: item, value: index}))}onChange={onChangeProvince}/></Tooltip><Tooltip title={"請先選擇省，再選擇城市"}><Selectplaceholder={"選擇市"}showSearchstyle={windowSize.clientWidth > widthSmallLimit ? {width: "48%"} : {width: "100%",marginTop: "20px"}}value={city ? cityIndex : undefined}options={cityData.map((item: string, index: number) => ({label: item, value: index}))}onChange={onChangeCity}/></Tooltip></div>)})ProvinceAreaSelect.displayName = "ProvinceAreaSelect";export default ProvinceAreaSelect;