react+taro实现省县区三级联动
Posted 丰柏林
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react+taro实现省县区三级联动相关的知识，希望对你有一定的参考价值。
案例在React.FC中实现。
视图代码
import Taro from "@tarojs/taro";
import View, Picker from "@tarojs/components";
import AtList, AtListItem, AtTextarea from "taro-ui";
import React, useEffect, useState from "react";
import addressData from "./addressData";
const selectorAddress = addressData
const PostInformationContainer: React.FC = () =>
const [address, setAddress] = useState('请选择地址')
//三级联动
const [customArray, setCustomArray] = useState(selectorAddress)
const [customIndex, setCustomIndex] = useState([0, 0, 0])
let [onlyArray, setOnlyArray] = useState([[], [], []])
useEffect(() =>
const data =
customArray: customArray,
customIndex: customIndex,
onlyArray: onlyArray,
;
for (let i = 0; i < data.customArray.length; i++)
// @ts-ignore
data.onlyArray[0].push(customArray[i].name);
for (let j = 0; j < data.customArray[customIndex[0]].cityList.length; j++)
// @ts-ignore
data.onlyArray[1].push(customArray[customIndex[0]].cityList[j].name);
for (let k = 0; k < customArray[customIndex[0]].cityList[customIndex[1]].areaList.length; k++)
// @ts-ignore
data.onlyArray[2].push(customArray[customIndex[0]].cityList[customIndex[1]].areaList[k]);
setCustomArray(data.customArray)
setCustomIndex(data.customIndex)
setOnlyArray(data.onlyArray)
)
//多列选择
const bindCustomPickerColumnChange = (e) =>
const newCustomArray = selectorAddress
const newCustomIndex = customIndex
const newOnlyArray = onlyArray
newCustomIndex[e.detail.column] = e.detail.value;
// console.log(e.detail)
// console.log(onlyArray);
const searchColumn = () =>
for (let i = 0; i < newCustomArray.length; i++)
let arr1 = [];
let arr2 = [];
if (i == newCustomIndex[0])
for (let j = 0; j < newCustomArray[i].cityList.length; j++)
// @ts-ignore
arr1.push(newCustomArray[i].cityList[j].name);
if (j == newCustomIndex[1])
for (let k = 0; k < newCustomArray[i].cityList[j].areaList.length; k++)
// @ts-ignore
arr2.push(newCustomArray[i].cityList[j].areaList[k]);
newOnlyArray[2] = arr2;
newOnlyArray[1] = arr1;
;
switch (e.detail.column)
case 0:
newCustomIndex[1] = 0;
newCustomIndex[2] = 0;
searchColumn();
break;
case 1:
newCustomIndex[2] = 0;
searchColumn();
break;
//这里要清空原来的数据进行数据更新
setOnlyArray([[],[],[]])
setCustomIndex(newCustomIndex)
//选择地区
const addressOnChange = (e) =>
const indexArr = e.detail.value
// console.log(customArray[indexArr[0]].cityList[indexArr[1]].areaList[indexArr[2]])
const addressText = `$customArray[indexArr[0]].name$customArray[indexArr[0]].cityList[indexArr[1]].areaList[indexArr[2]]`
setAddress(addressText)
return (
<View className='information-pages'>
/*选择地址 这里要自己写三级联动*/
<Picker mode='multiSelector' range=onlyArray onChange=addressOnChange value=customIndex onColumnChange=bindCustomPickerColumnChange.bind(this)>
<AtList>
<AtListItem
title='选择地址'
extraText=address
>
</AtListItem>
</AtList>
</Picker>
</View>
)
export default PostInformationContainer
数据献上
const addressData = [
name:'上海',
cityList:[
name:'市辖区',
areaList:['黄浦区','卢湾区','徐汇区','长宁区','静安区','普陀区','闸北区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','南汇区','奉贤区'],
name:'县',
areaList:['崇明县'],
],
,
name:'北京', cityList:[
name:'市辖区', areaList:['东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区'],
name:'县', areaList:['密云县','延庆县']
],
name:'天津', cityList:[
name:'市辖区', areaList:['和平区','河东区','河西区','南开区','河北区','红桥区','塘沽区','汉沽区','大港区','东丽区','西青区','津南区','北辰区','武清区','宝坻区'],
name:'县', areaList:['宁河县','静海县','蓟 县']
],
name:'重庆', cityList:[
name:'市辖区', areaList:['万州区','涪陵区','渝中区','大渡口区','江北区','沙坪坝区','九龙坡区','南岸区','北碚区','万盛区','双桥区','渝北区','巴南区','黔江区','长寿区'],
name:'县', areaList:['綦江县','潼南县','铜梁县','大足县','荣昌县','璧山县','梁平县','城口县','丰都县','垫江县','武隆县','忠 县','开 县','云阳县','奉节县','巫山县','巫溪县','石柱土家族自治县','秀山土家族苗族自治县','酉阳土家族苗族自治县','彭水苗族土家族自治县'],
name:'市', areaList:['江津市','合川市','永川市','南川市']
],
name:'四川', cityList:[
name:'成都市', areaList:['市辖区','锦江区','青羊区','金牛区','武侯区','成华区','龙泉驿区','青白江区','新都区','温江县','金堂县','双流县','郫 县','大邑县','蒲江县','新津县','都江堰市','彭州市','邛崃市','崇州市'],
name:'自贡市', areaList:['市辖区','自流井区','贡井区','大安区','沿滩区','荣 县','富顺县'],
name:'攀枝花市', areaList:['市辖区','东 区','西 区','仁和区','米易县','盐边县'],
name:'泸州市', areaList:['市辖区','江阳区','纳溪区','龙马潭区','泸 县','合江县','叙永县','古蔺县'],
name:'德阳市', areaList:['市辖区','旌阳区','中江县','罗江县','广汉市','什邡市','绵竹市'],
name:'绵阳市', areaList:['市辖区','涪城区','游仙区','三台县','盐亭县','安 县','梓潼县','北川羌族自治县','平武县','江油市'],
name:'广元市', areaList:['市辖区','市中区','元坝区','朝天区','旺苍县','青川县','剑阁县','苍溪县'],
name:'遂宁市', areaList:['市辖区','船山区','安居区','蓬溪县','射洪县','大英县'],
name:'内江市', areaList:['市辖区','市中区','东兴区','威远县','资中县','隆昌县'],
name:'乐山市', areaList:['市辖区','市中区','沙湾区','五通桥区','金口河区','犍为县','井研县','夹江县','沐川县','峨边彝族自治县','马边彝族自治县','峨眉山市'],
name:'南充市', areaList:['市辖区','顺庆区','高坪区','嘉陵区','南部县','营山县','蓬安县','仪陇县','西充县','阆中市'],
name:'眉山市', areaList:['市辖区','东坡区','仁寿县','彭山县','洪雅县','丹棱县','青神县'],
name:'宜宾市', areaList:['市辖区','翠屏区','宜宾县','南溪县','江安县','长宁县','高 县','珙 县','筠连县','兴文县','屏山县'],
name:'广安市', areaList:['市辖区','广安区','岳池县','武胜县','邻水县','华莹市'],
name:'达州市', areaList:['市辖区','通川区','达 县','宣汉县','开江县','大竹县','渠 县','万源市'],
name:'雅安市', areaList:['市辖区','雨城区','名山县','荥经县','汉源县','石棉县','天全县','芦山县','宝兴县'],
name:'巴中市', areaList:['市辖区','巴州区','通江县','南江县','平昌县'],
name:'资阳市', areaList:['市辖区','雁江区','安岳县','乐至县','简阳市'],
name:'阿坝藏族羌族自治州', areaList:['汶川县','理 县','茂 县','松潘县','九寨沟县','金川县','小金县','黑水县','马尔康县','壤塘县','阿坝县','若尔盖县','红原县'],
name:'甘孜藏族自治州', areaList:['康定县','泸定县','丹巴县','九龙县','雅江县','道孚县','炉霍县','甘孜县','新龙县','德格县','白玉县','石渠县','色达县','理塘县','巴塘县','乡城县','稻城县','得荣县'],
name:'凉山彝族自治州', areaList:['西昌市','木里藏族自治县','盐源县','德昌县','会理县','会东县','宁南县','普格县','布拖县','金阳县','昭觉县','喜德县','冕宁县','越西县','甘洛县','美姑县','雷波县']
]以上是关于react+taro实现省县区三级联动的主要内容，如果未能解决你的问题，请参考以下文章