思路：
數據設計：省份為一維數組，一級市為二維數組，二級市/區/縣為三維數組。這樣設計的好處在於根據數組索引實現數據的關聯。
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;