React后台管理系统-品类选择器二级联动组件
1.页面大致是这个样子
2.页面结构
- <div className="col-md-10">
- <select name="" onChange={(e) => this.onFirstCategoryChange(e)} className="form-control cate-select">
- <option value="">请选择一级分类</option>
- {
- //箭头函数=>右边,加上了{}就需要return,不加就不需要return
- this.state.firstCategoryList.map(
- (category, index) => <option value={category.id} key={index}>{category.name}</option>)
- }
- </select>
- { this.state.secondCategoryList.length ?
- <select name="" onChange={(e) => this.onSecondCategoryChange(e)} className="form-control cate-select">
- <option value="">请选择二级分类</option>
- {
- this.state.secondCategoryList.map(
- (category, index)=> <option value={category.id} key={index}>{category.name}</option>
- )
- }
- </select> : null
- }
- </div>
3.定义state里边的数据
- this.state = {
- firstCategoryList : [],
- firstCategoryId : 0,
- secondCategoryList : [],
- secondCategoryId : 0,
- }
监听select选择框,当一级品类和二级品类改变的时候, 更新state里边firstCategoryId和secondCategoryId的值
- //一级品类改变事件
- onFirstCategoryChange(e){
- //取一级品类的值,没有的话为0
- let newValue=e.target.value || 0;
- this.setState({
- firstCategoryId : newValue,
- //当一级品类改变时清空二级品类
- secondCategoryList : [],
- secondCategoryId : 0,
- },() => {
- //加载二级分类
- this.loadSecondCategory()
- })
- }
- //二级品类改变事件
- onSecondCategoryChange(e){
- //取一级品类的值,没有的话为0
- let newValue=e.target.value || 0;
- this.setState({
- secondCategoryId : newValue,
- },() => {
- //加载二级分类
- this.onPropsCategoryChange();
- })
- }
加载一级分类
- //加载一级分类
- loadFirstCategory(){
- _product.getCategoryList().then(res => {
- this.setState({
- firstCategoryList : res
- });
- }, errMsg => {
- _mm.errorTips(errMsg);
- });
- }
加载二级分类
- //加载二级分类
- // 加载二级分类
- loadSecondCategory(){
- _product.getCategoryList(this.state.firstCategoryId).then(res => {
- this.setState({
- secondCategoryList : res
- });
- }, errMsg => {
- _mm.errorTips(errMsg);
- });
- }
4.把最新的firstCategoryId和secondCategoryId的值传入父组件,更新父组件里边一级品类和二级品类
- // 传给父组件选中的结果
- onPropsCategoryChange(){
- // 判断props里的回调函数存在
- let categoryChangable = typeof this.props.onCategoryChange === 'function';
- // 如果是有二级品类
- if(this.state.secondCategoryId){
- categoryChangable && this.props.onCategoryChange(this.state.secondCategoryId, this.state.firstCategoryId);
- }
- // 如果只有一级品类
- else{
- categoryChangable && this.props.onCategoryChange(this.state.firstCategoryId, 0);
- }
- }
父组件使用CategorySelector组件
- <div className="form-group">
- <label className="col-md-2 control-label">所属分类</label>
- <CategorySelector
- categoryId={this.state.categoryId}
- parentCategoryId={this.state.parentCategoryId}
- onCategoryChange={ (categoryId,parentCategoryId) => this.onCategoryChange(categoryId,parentCategoryId)} />
更新父组件state里边一级品类和二级品类的值
- //品类改变事件
- onCategoryChange(categoryId,parentCategoryId){
- this.setState({
- categoryId : categoryId,
- parentCategoryId : parentCategoryId
- });
- }
React后台管理系统-品类选择器二级联动组件的更多相关文章
- React后台管理系统-品类的增加、修改和查看
1.页面 2.品类列表展示 let listBody = this.state.list.map((category, index) => { return ( ...
- React后台管理系统-添加商品组件
引入了CategorySelector 二级联动组件.FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MU ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式 ...
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...
- 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱
一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...
- 《React后台管理系统实战 :三》header组件:页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数
一.布局及排版 1.布局src/pages/admin/header/index.jsx import React,{Component} from 'react' import './header. ...
- 【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
随机推荐
- Unity GameObject.FindObjectOfType<>(); 按类型查找游戏对象
FindObjectOfType<>() 是按类型查找游戏对象.<>里面填写类型,那要是有多个这种类型的呢?来试一下. 1. 新建一个场景,新建一个Test.cs脚本,内容 ...
- (转)AIX修改系统时区的3种方法和AIX 时间问题(夏令时)
原文:http://blog.csdn.net/fuwencaho/article/details/28267283 http://www.wo81.com/tec/os/aix/2014-04-30 ...
- Object.create 以及 Object.setPrototypeOf
第一部分 Object.crate() 方法是es5中的关于原型的方法, 这个方法会使用指定的原型对象以及属性去创建一个新的对象. 语法 Object.create(proto, [ properti ...
- 代码“小白”的温故而知新(一)-----OA管理系统
古人云:温故而知新.这是极好的,近来,作为一个小白,利用点空闲时间把之前几个月自己写过的一个作为练手的一个OA系统又重新拿来温习一番,希望在巩固基础之上能得到新的启示.现在回想起来,之前一个人,写写停 ...
- SSRS 参数 单选 多选
前段时间 公司要求报表的选项可以多选. 知道需求后,研究了下实现. 首先我们创建一个报表,然后添加3个数据集,2个参数,如下图. DataSet1数据集:存放主数据. ddl_emplid数据集:存放 ...
- 什么是NIO2
NIO2I/O发展历史Java1.0-1.3在Java的早期版本中,没有完整的I/O支持,在开发过程中需要解决以下问题:1)没有数据缓冲区或者NIO的通道概念,需要编程人员处理底层细节.2)I/O是受 ...
- Hibernate课程 初探一对多映射3-4 双向多对一的测试
1 单向多对一和单向多对一的区别 比如部门和员工,一个部门下有很多员工,如果只查一个员工属于哪个部门,就用单向的,如果还要查一个部门下的所有员工,就用双向的. 2 双向多对一的配置 除了单向xml和双 ...
- java虚拟机之GC(转)
垃圾回收主要内容: 1. 那些内存需要回收? 2. 什么时候回收? 3. 如何回收? 垃圾回收主要针对运行时数据区那些区域? 运行时数据区的线程私有区域有:虚拟机栈,本地方法栈,程序计数器等: 栈中的 ...
- 深入理解mvc 一系列收藏
http://www.cnblogs.com/P_Chou/archive/2010/11/01/1866605.html
- (转)ArcEngine读取数据(数据访问)
读取和访问数据是进行任何复杂的空间分析及空间可视化表达的前提,ArcGIS支持的数据格式比较丰富,下面就这些格式Shapefile.Coverage.Personal Geodatabase.Ente ...