React后台管理系統-品類選擇器二級聯動組件

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.    }