React后台管理系统-品类选择器二级联动组件

Posted 2020-11-20 wangyawei

1.页面大致是这个样子

 

2.页面结构

1. <div className="col-md-10">
2.            <select name="" onChange={(e) => this.onFirstCategoryChange(e)} className="form-control cate-select">
3.                 <option value="">请选择一级分类</option>
4.                 {
5.                  //箭头函数=>右边，加上了{}就需要return,不加就不需要return
6.                   this.state.firstCategoryList.map(
7.                       (category, index) => <option value={category.id} key={index}>{category.name}</option>)
8.                 }
9.            </select>
10.            { this.state.secondCategoryList.length ?
11.            <select name="" onChange={(e) => this.onSecondCategoryChange(e)} className="form-control cate-select">
12.                 <option value="">请选择二级分类</option>
13.                 {
14.                          this.state.secondCategoryList.map(
15.                              (category, index)=> <option value={category.id} key={index}>{category.name}</option>
16.                          )
17.               }
18.            </select> : null
19.            }
20.         </div>

 

3.定义state里边的数据

1. this.state = {
2.            firstCategoryList : [],
3.            firstCategoryId : 0,
4.            secondCategoryList : [],
5.            secondCategoryId : 0,
6.        }

监听select选择框，当一级品类和二级品类改变的时候, 更新state里边firstCategoryId和secondCategoryId的值

1. //一级品类改变事件
2.     onFirstCategoryChange(e){
3.         //取一级品类的值，没有的话为0
4.         let newValue=e.target.value || 0;
5.         this.setState({
6.  
7.             firstCategoryId : newValue,
8.             //当一级品类改变时清空二级品类
9.             secondCategoryList : [],
10.             secondCategoryId : 0,
11.         },() => {
12.             //加载二级分类
13.             this.loadSecondCategory()
14.         })
15.     }
16.     //二级品类改变事件
17.     onSecondCategoryChange(e){
18.            //取一级品类的值，没有的话为0
19.            let newValue=e.target.value || 0;
20.            this.setState({
21.               secondCategoryId : newValue,
22.            },() => {
23.                //加载二级分类
24.                this.onPropsCategoryChange();
25.            })
26.     }

加载一级分类

1. //加载一级分类
2.     loadFirstCategory(){
3.         _product.getCategoryList().then(res => {
4.             this.setState({
5.                 firstCategoryList : res
6.             });
7.         }, errMsg => {
8.             _mm.errorTips(errMsg);
9.         });
10.     }

加载二级分类

1. //加载二级分类
2.    // 加载二级分类
3.    loadSecondCategory(){
4.        _product.getCategoryList(this.state.firstCategoryId).then(res => {
5.            this.setState({
6.                secondCategoryList : res
7.            });
8.        }, errMsg => {
9.            _mm.errorTips(errMsg);
10.        });
11.    }

 

4.把最新的firstCategoryId和secondCategoryId的值传入父组件，更新父组件里边一级品类和二级品类

1. // 传给父组件选中的结果
2.    onPropsCategoryChange(){
3.        // 判断props里的回调函数存在
4.        let categoryChangable = typeof this.props.onCategoryChange === ‘function‘;
5.        // 如果是有二级品类
6.        if(this.state.secondCategoryId){
7.            categoryChangable && this.props.onCategoryChange(this.state.secondCategoryId, this.state.firstCategoryId);
8.        }
9.        // 如果只有一级品类
10.        else{
11.            categoryChangable && this.props.onCategoryChange(this.state.firstCategoryId, 0);
12.        }
13.    }

父组件使用CategorySelector组件

1. <div className="form-group">
2.                        <label className="col-md-2 control-label">所属分类</label>
3.                        <CategorySelector
4.                         categoryId={this.state.categoryId}
5.                         parentCategoryId={this.state.parentCategoryId}
6.                         onCategoryChange={ (categoryId,parentCategoryId) => this.onCategoryChange(categoryId,parentCategoryId)} />

更新父组件state里边一级品类和二级品类的值

1. //品类改变事件
2.    onCategoryChange(categoryId,parentCategoryId){
3.        this.setState({
4.            categoryId : categoryId,
5.            parentCategoryId : parentCategoryId
6.        });
7.    }