封装react组件——三级联动
Posted 南韵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了封装react组件——三级联动相关的知识，希望对你有一定的参考价值。
思路：
数据设计：省份为一维数组，一级市为二维数组，二级市/区/县为三维数组。这样设计的好处在于根据数组索引实现数据的关联。
UI组件： MUI的DropDownMenu组件或Select Field组件。将省市县数据定位常量，在UI组件里引用，通过数组遍历。
数据设计代码：（鉴于数据比较多，只列举部分）
provinceData.js
/********** 省级数据 **********/
export const provinces =[‘安徽省‘,‘澳门特别行政区‘,‘北京‘];
/********** 市级数据 **********/
export const cities = [
[‘合肥市‘,‘芜湖市‘,‘蚌埠市‘,‘淮南市‘,‘马鞍山市‘,‘淮北市‘,‘铜陵市‘,‘安庆市‘,‘黄山市‘,‘滁州市‘,‘阜阳市‘,‘宿州市‘,‘六安市‘,‘亳州市‘,‘池州市‘,‘宣城市‘],
[‘澳门半岛‘, ‘离岛‘],
[‘北京市‘],
];
/********** 市二级数据 **********/
export const counties =
[
[
[‘瑶海区‘,‘庐阳区‘,‘蜀山区‘,‘包河区‘,‘长丰县‘,‘肥东县‘,‘肥西县‘,‘庐江县‘,‘其它区‘,‘巢湖市‘],
[‘镜湖区‘,‘戈江区‘,‘鸠江区‘,‘三山区‘,‘芜湖县‘,‘繁昌县‘,‘南陵县‘,‘无为县‘,‘其它区‘],
[‘龙子湖区‘,‘蚌山区‘,‘禹会区‘,‘淮上区‘,‘怀远区‘,‘五河县‘,‘固镇县‘,‘其它区‘],
[‘大通区‘,‘田家庵区‘,‘谢家集区‘,‘八公山区‘,‘潘集区‘,‘凤台县‘,‘寿县‘,‘其它区‘],
[‘花山区‘,‘雨山区‘,‘博望区‘,‘当涂县‘,‘含山县‘,‘和县‘,‘其它区‘],
[‘杜集区‘,‘相山区‘,‘烈山区‘,‘濉溪县‘,‘其它区‘],
[‘铜官区‘,‘郊区‘,‘义安区‘,‘枞阳县‘,‘其它区‘],
[‘迎江区‘,‘大观区‘,‘宜秀区‘,‘怀宁县‘,‘潜山县‘,‘太湖县‘,‘宿松县‘,‘望江县‘,‘岳西县‘,‘桐城市‘,‘其它区‘],
[‘屯溪区‘,‘黄山区‘,‘徽州区‘,‘歙县‘,‘休宁县‘,‘祁门县‘,‘其它区‘],
[‘琅琊区‘,‘南谯区‘,‘来安息‘,‘全椒县‘,‘定远县‘,‘凤阳县‘,‘天长市‘,‘明光市‘,‘其它区‘],
[‘颍州区‘,‘颍东区‘,‘临泉县‘,‘太和县‘,‘阜南县‘,‘颍上县‘,‘界首市‘,‘其它区‘],
[‘埇桥区‘,‘砀山县‘,‘萧县‘,‘灵璧县‘,‘泗县‘,‘其它区‘],
[‘金安区‘,‘裕安区‘,‘叶集区‘,‘霍邱县‘,‘舒城县‘,‘金寨县‘,‘霍山县‘,‘其它区‘],
[‘谯城区‘,‘涡阳区‘,‘蒙城区‘,‘利辛县‘,‘其它区‘],
[‘贵池区‘,‘东至县‘,‘石台县‘,‘青阳县‘,‘其它区‘],
[‘宣州区‘,‘郎溪县‘,‘广德县‘,‘泾县‘,‘绩溪县‘,‘旌德县‘,‘宁国市‘,‘其它区‘]
],
[
[‘澳门‘]
],
[
[‘东城区‘,‘西城区‘,‘朝阳区‘,‘丰台区‘,‘石景山区‘,‘海淀区‘,‘门头沟区‘,‘房山区‘,‘通州区‘,‘顺义区‘,‘昌平区‘,‘大兴区‘,‘怀柔区‘,‘平谷区‘,‘密云县‘,‘延庆县‘,‘其它区‘],
],
]
React组件代码：
ProvinceSelect.jsx
import React from ‘react‘;
import DropDownMenu from ‘material-ui/DropDownMenu‘;
import MenuItem from ‘material-ui/MenuItem‘;
import { provinces, cities, counties } from ‘./provinceData‘;
class ProvinceSelect extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
provinceValue: ‘安徽省‘,
provinceIndex: 0,
cityValue: ‘合肥市‘,
cityIndex: 0,
countyValue: ‘瑶海区‘,
countyIndex: 0,
};
}
handleChangeProvince = (event, index, value) =>
this.setState({
provinceIndex: index,
provinceValue: value,
cityValue: cities[index][0],
countyValue: counties[index][0][0],
});
handleChangeCity = (event, index, value) =>
this.setState({
cityIndex: index,
cityValue: value,
countyValue: counties[this.state.provinceIndex][index][0],
});
handleChangeCounty = (event, index, value) => this.setState({ countyIndex: index, countyValue: value });
render() {
const { provinceValue, provinceIndex, cityValue, cityIndex, countyValue } = this.state;
return (
<div>
<DropDownMenu value={provinceValue} onChange={this.handleChangeProvince}>
{provinces.map((item, index) => (
<MenuItem key={`province${index}`} value={item} primaryText={item} />
))}
</DropDownMenu>
<DropDownMenu value={cityValue} onChange={this.handleChangeCity}>
{cities[provinceIndex].map((item, index) => (
<MenuItem key={`city${index}`} value={item} primaryText={item} />
))}
</DropDownMenu>
<DropDownMenu value={countyValue} onChange={this.handleChangeCounty}>
{counties[provinceIndex][cityIndex].map((item, index) => (
<MenuItem key={`county${index}`} value={item} primaryText={item} />
))}
</DropDownMenu>
</div>
);
}
}
export default ProvinceSelect;
以上是关于封装react组件——三级联动的主要内容，如果未能解决你的问题，请参考以下文章