React后台管理系统-商品列表搜索框listSearch组件
React后台管理系统-商品列表搜索框listSearch组件
1.商品列表搜索框
2.搜索框页面的结构为
-
<div className="row search-wrap">
-
<div className="col-md-12">
-
<div className="form-inline">
-
<div className="form-group">
-
<select className="form-control"
-
name="searchType"
-
onChange={(e) => this.onValueChange(e)}>
-
<option value="productId">按商品ID查询</option>
-
<option value="productName">按商品名称查询</option>
-
</select>
-
</div>
-
<div className="form-group">
-
<input type="text"
-
className="form-control"
-
placeholder="关键词"
-
name="searchKeyword"
-
onKeyUp={(e) => this.onSearchKeywordKeyUp(e)}
-
onChange={(e) => this.onValueChange(e)}/>
-
</div>
-
<button className="btn btn-primary"
-
onClick={(e) => this.onSearch()}>搜索</button>
-
</div>
-
</div>
-
</div>
3. State里边定义数据
-
this.state = {
-
searchType : 'productId',
-
searchKeyword : ' '
-
}
分别给select标签和input输入框设置 onChange事件,监听选择框和输入框的变化,变化时执行onValueChange函数,传入参数e, 更state里边searchType和searchkeyword的值
-
// 数据变化的时候
-
onValueChange(e){
-
let name = e.target.name,
-
value = e.target.value.trim();
-
console.log(name)
-
console.log(value)
-
this.setState({
-
[name] : value
-
});
-
}
监听键盘事件onKeyUp,当按下enter键时触发
-
// 输入关键字后按回车,自动提交
-
onSearchKeywordKeyUp(e){
-
if(e.keyCode === 13){
-
this.onSearch();
-
}
-
}
4.点击查询的时候,执行onSearch()函数, onSearch函数在商品列表组件里边定义,通过prop参数传过来,listSearch组件提供searchType和searchkeyword即可
-
// 点击搜索按钮的时候
-
onSearch(){
-
this.props.onSearch(this.state.searchType, this.state.searchKeyword);
-
}
l istSearch组件
-
<ListSearch onSearch={(searchType, searchKeyword) => {this.onSearch(searchType, searchKeyword)}} />
onSearch()函数
-
//搜索
-
onSearch(searchType, searchKeyword){
-
let listType=searchKeyword ==='' ? 'list': 'search';
-
this.setState({
-
listType : listType,
-
pageNum : 1,
-
searchType : searchType,
-
searchKeyword : searchKeyword
-
}, () => {
-
this.loadProductList();
-
})
-
}