封装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;

时间: 2024-10-19 15:02:44

封装react组件——三级联动的相关文章

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

话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>城市三级联动 - citys-原生js封装</title> <link rel="shortcut icon" href="../public/image/favi

三级联动下拉插件waterfall封装, 效果很棒360兼容模式极速模式完美运行兼容IE,Firefox等主流浏览器^

项目中很多地方用到了三级联动就封装了一个适合自己公司的js插件, 虽然写的不太好还是想跟亲们分享下, 多多交流多多指点^_^; 1.效果: 目录结构: 1.源码: jquery.waterfall-1.0.2.js /** *@Author: YingYueZhou *@Date: 2015/07/15 *@Params: object */ ;(function($){ $.fn.waterfall = function(options){ options = $.extend({ nodes

Android省市区三级联动滚轮选择(真实项目中提取出来的组件)

最近项目要做一个,类似淘宝手机客户端的,选择收货地址的三级联动滚动选择组件,下面是它的大致界面截图: 在IOS中有个叫UIPickerView的选择器,并且在dataSource中定义了UIPickerView的数据源和定制内容,所以用只要熟悉它的基本用法,要实现这么个三级联动滑动选择是挺简单的. 言归正传,今天讨论的是在Android里面如何来实现这么个效果,那么如何实现呢??? 相信部分童鞋首先想到的是android.widget.DatePicker和android.widget.Time

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

工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section class="address"> <secti

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

一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么这一块的代码会看着非常恶心.如果这个时候我们将这个页面的表格以及弹框这些单独的模块分别写成组件的形式,然后再在这个页面中将这些组件引入进来,那样我们的代码会看着非常整洁.这样做会需要使用到父子组件之间的通信,下面会详细解释. 场景二:日常项目中我们会经常遇到某一个功能会在不同地方使用,但是每次使用的

React -- 组件封装&amp;props

一.组件封装 一个函数就是一个组件,该函数接受一个props对象,并返回一个React元素 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 通过class和React.Component也可以定义一个组件,跟上面的组件是等价的 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.n

封装标签省,市,县。三级联动

package com.jy.modules.tld; import com.jy.platform.api.sysarea.SysAreaAPI; import java.io.IOException; import java.util.List; import java.util.Map; import javax.servlet.ServletContext; import javax.servlet.jsp.JspException; import javax.servlet.jsp.J

WinForm Timer控件,三级联动[省,市,区]

Timer控件: 组件中的最后一个控件,功能是可以根据用户自定义的时间间隔来触发时间,不会印象窗体本身的其他事件进行. 属性: Enable  设置控件是否启用 Interval  设置事件的频率,以毫秒为单位 事件只有一个:Tick事件 例:使用timer控件获取当前时间并即时变动 private void timer1_Tick(object sender, EventArgs e) { label1.Text = DateTime.Now.ToString("yyyy年MM月dd日hh时m

使用php ajax实现一个省市区的三级联动

要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 完成效果如下: 实现三级联动  以后可能 还会用到 所以 可以将其封装为一个方法 新建一个JS页面 代码如下: // JavaScript Document $(document).ready(function(e) { //向DIV里面扔三个下拉 var str = "&