其他分享
首页 > 其他分享> > React后台管理系统-商品列表搜索框listSearch组件

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

posted on 2020-04-16 19:48  six、hc  阅读(...)  评论(...)  编辑  收藏

标签:searchKeyword,name,searchType,React,state,搜索,listSearch,组件,onSearch
来源: https://www.cnblogs.com/six-hc/p/12715208.html