封装react组件——三级联动
思路:
数据设计:省份为一维数组,一级市为二维数组,二级市/区/县为三维数组。这样设计的好处在于根据数组索引实现数据的关联。
UI组件: MUI的DropDownMenu组件或Select Field组件。将省市县数据定位常量,在UI组件里引用,通过数组遍历。
数据设计代码:(鉴于数据比较多,只列举部分)
provinceData.js
封装react组件——三级联动的更多相关文章
- React 省市区三级联动
省市区所对应的数据来自:http://www.zgguan.com/zsfx/jsjc/6541.html react中的代码是: export default class AddReceive ex ...
- js封装的三级联动菜单(使用时只需要一行js代码)
前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...
- react初探(二)之父子组件通信、封装公共组件
一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...
- 用mint-ui picker组件 实现省市区三级联动
公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表 ...
- vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
- 1:MUI选择器组件抛出“n.getSelectedItem is not a function”异常的解决办法 2:mui三级联动 3:移动端关闭虚拟键盘
1:如下图 问题:引用了mui的地址选择的三级联动的应用在h5上的组件 百度发现别人思路对 Array 原型链方法扩充时,会抛出这个异常. 修改方法: mui.poppicker.js 第 112 行 ...
- vue移动端地址三级联动组件(一)
vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...
- 城市三级联动 AJAX-原生js封装
话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...
- 封装react antd的表格table组件
封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状 ...
随机推荐
- 乘积尾零——第九届蓝桥杯C语言B组(省赛)第三题
原创 标题:乘积尾零 如下的10行数据,每行有10个整数,请你求出它们的乘积的末尾有多少个零? 5650 4542 3554 473 946 4114 3871 9073 90 4329 2758 7 ...
- 大数据入门第九天——MapReduce详解(六)MR其他补充
一.自定义in/outputFormat 1.需求 现有一些原始日志需要做增强解析处理,流程: 1. 从原始日志文件中读取数据 2. 根据日志中的一个URL字段到外部知识库中获取信息增强到原始日志 3 ...
- JavaEE笔记(二)
查询load()和get()的区别 # 以下查询都是根据id查询 // Load和Get都会在第一次查询的是创建一个一级缓存查询语句 // 下一次查询的时候从缓存中查询是否有缓存的语句 // 如果有只 ...
- OpenStack入门篇(二十二)之实现阿里云VPC的SDN网络
1.修改/etc/neutron/neutron.conf配置 [root@linux-node1 ~]# vim /etc/neutron/neutron.conf [defalut] ... co ...
- python迭代器的内置函数
1.迭代器: 内置函数: (1)iter() -__iter__() (2)next() -__next__() 2.迭代器的举例; 对于Fibs数列,我们对其进行 限量输出: 实现代码如下: cla ...
- Netty源码分析第1章(Netty启动流程)---->第5节: 绑定端口
Netty源码分析第一章:Netty启动步骤 第五节:绑定端口 上一小节我们学习了channel注册在selector的步骤, 仅仅做了注册但并没有监听事件, 事件是如何监听的呢? 我们继续跟第一小节 ...
- maven项目的标准目录结构
maven项目的标准目录结构如下:
- Playfair加密
前面讲的不管是单码加密还是多码加密都属于单图加密,什么是单图加密和多图加密呢,简单来说单图加密就是一个字母加密一个字母,而多图加密就是一个字符组加密一个字符组.比如双图加密就是两个字母加密两个字母,这 ...
- 常用函数-filter、map、reduce、sorted
常用函数 filter map reduce sorted和列表自带sort 待续... 一.filter函数 1.说明 filter()函数接收一个函数 f 和一个可迭代对象,这个函数 f 的作用是 ...
- CocoaPods :为iOS程序提供依赖管理的工具(yoowei)
修改于:2016.11.18 2017.1.10 2019.01.31 CocoaPods 源码 : https://github.com/CocoaPods/CocoaPods CocoaPo ...