思路 per prop primary menu 市級 sel prim his

思路：

數據設計：省份為一維數組，一級市為二維數組，二級市/區/縣為三維數組。這樣設計的好處在於根據數組索引實現數據的關聯。

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組件——三級聯動