思路:

数据设计:省份为一维数组,一级市为二维数组,二级市/区/县为三维数组。这样设计的好处在于根据数组索引实现数据的关联。

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组件——三级联动的更多相关文章

  1. React 省市区三级联动

    省市区所对应的数据来自:http://www.zgguan.com/zsfx/jsjc/6541.html react中的代码是: export default class AddReceive ex ...

  2. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  3. react初探(二)之父子组件通信、封装公共组件

    一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...

  4. 用mint-ui picker组件 实现省市区三级联动

    公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表 ...

  5. vue仿京东省市区三级联动选择组件

    工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...

  6. 1:MUI选择器组件抛出“n.getSelectedItem is not a function”异常的解决办法 2:mui三级联动 3:移动端关闭虚拟键盘

    1:如下图 问题:引用了mui的地址选择的三级联动的应用在h5上的组件 百度发现别人思路对 Array 原型链方法扩充时,会抛出这个异常. 修改方法: mui.poppicker.js 第 112 行 ...

  7. vue移动端地址三级联动组件(一)

    vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...

  8. 城市三级联动 AJAX-原生js封装

    话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...

  9. 封装react antd的表格table组件

    封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状 ...

随机推荐

  1. Kotlin安卓页面本地存储数据(方法和封装)

    直接上代码 封装: //存储key对应的数据 fun saveData(context: Activity, key: String, info: String) { val sharedPrefer ...

  2. JavaWeb基础—EL表达式与JSTL标签库

    EL表达式: EL 全名为Expression Language.EL主要作用 获取数据(访问对象,访问数据,遍历集合等) 执行运算 获取JavaWeb常用对象 调用Java方法(EL函数库) 给出一 ...

  3. 洛谷 P1142 轰炸

    洛谷 P1142 轰炸 题目描述 “我该怎么办?”飞行员klux向你求助. 事实上,klux面对的是一个很简单的问题,但是他实在太菜了. klux要想轰炸某个区域内的一些地方,它们是位于平面上的一些点 ...

  4. 一维码Code 39简介及其解码实现(zxing-cpp)

    一维码Code 39:由于编制简单.能够对任意长度的数据进行编码.支持设备广泛等特性而被广泛采用. Code 39码特点: 1. 能够对任意长度的数据进行编码,其局限在于印刷品的长度和条码阅读器的识别 ...

  5. 15-[JavaScript]-ECMAScript 1

    0.javaScript的发展历程 https://zhuanlan.zhihu.com/p/27985124 1.javaScript是什么? javaScript是一种web前端的描述语言,也是一 ...

  6. P3354 [IOI2005]Riv 河流

    树形dp,设f[i][j][k]表示第i个点的子树中选择j个点作为伐木场,而且k是建了伐木场的最浅的i的祖先的情况下,最小的收益. 这种题还要练一下,咕咕 然后转移可以n4方做. // luogu-j ...

  7. Orz YYB!

    就是右边OrzYYB按钮的实现. 从这位dalao的博客蒯(mogai)的js代码. <script> function orzyyb(){ document.getElementById ...

  8. Jenkins + Gitlab + Ansible--playbook 代码上线流程(文末有免费视频)

      jenkins 构建是支持 git 选择分支 安装 Git Parameter 插件在系统管理中的插件管理 然后点击选插件,在右上角输入 Git Parameter,找到 Git Paramete ...

  9. js问题 window.location.hash和window.location.href有什么不同

    hash:设置或获取 href 属性中在井号“#”后面的分段. href:设置或获取整个 URL 为字符串. 通过下面的测试你会发现区别,将代码放到你的HTML中,然后用浏览器打开,测试步骤: 点击“ ...

  10. Restful和WeBAPI学习笔记

    1.restful是基于无状态的,所谓无状态就是说客户端和服务端的每次通话都是独立的,不存在session和cookie之类的保存状态的机制,基于该协议可实现简单的curd操作, 其操作分为get\p ...