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