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

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