React后台管理系統-商品列表搜索框listSearch組件

1.商品列表搜索框

 

2.搜索框頁面的結構為

1. <div className="row search-wrap">
2.               <div className="col-md-12">
3.                   <div className="form-inline">
4.                       <div className="form-group">
5.                           <select className="form-control"
6.                               name="searchType"
7.                              onChange={(e) => this.onValueChange(e)}>
8.                               <option value="productId">按商品ID查詢</option>
9.                               <option value="productName">按商品名稱查詢</option>
10.                           </select>
11.                       </div>
12.                       <div className="form-group">
13.                           <input type="text"
14.                               className="form-control"
15.                               placeholder="關鍵詞"
16.                               name="searchKeyword"
17.                               onKeyUp={(e) => this.onSearchKeywordKeyUp(e)}
18.                               onChange={(e) => this.onValueChange(e)}/>
19.                       </div>
20.                       <button className="btn btn-primary"
21.                           onClick={(e) => this.onSearch()}>搜索</button>
22.                   </div>
23.               </div>
24.           </div>

 

3.  State里邊定義數據

1. this.state = {
2.            searchType : 'productId',
3.            searchKeyword : ' '
4.        }

     分別給select標簽和input輸入框設置 onChange事件，監聽選擇框和輸入框的變化，變化時執行onValueChange函數，傳入參數e, 更state里邊searchType和searchkeyword的值

1. // 數據變化的時候
2.     onValueChange(e){
3.        let name = e.target.name,
4.            value = e.target.value.trim();
5.        console.log(name)
6.        console.log(value)
7.        this.setState({
8.            [name] : value
9.        });
10.    }

     監聽鍵盤事件onKeyUp,當按下enter鍵時觸發

1. // 輸入關鍵字后按回車，自動提交
2.     onSearchKeywordKeyUp(e){
3.         if(e.keyCode === 13){
4.             this.onSearch();
5.         }
6.     }

 

4.點擊查詢的時候，執行onSearch（）函數, onSearch函數在商品列表組件里邊定義，通過prop參數傳過來，listSearch組件提供searchType和searchkeyword即可

1. // 點擊搜索按鈕的時候
2.     onSearch(){
3.        this.props.onSearch(this.state.searchType, this.state.searchKeyword);
4.    }

    l istSearch組件

1. <ListSearch onSearch={(searchType, searchKeyword) => {this.onSearch(searchType, searchKeyword)}} />

    onSearch()函數

1. //搜索
2.    onSearch(searchType, searchKeyword){
3.        let listType=searchKeyword ==='' ? 'list': 'search';
4.        this.setState({
5.            listType : listType,
6.            pageNum : 1,
7.            searchType : searchType,
8.            searchKeyword : searchKeyword
9.        }, () => {
10.            this.loadProductList();
11.        })
12.    }