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();
- })
- }
React后台管理系统-商品列表搜索框listSearch组件的更多相关文章
- React后台管理系统-商品管理列表组件
1.商品列表页面结构 <div id="page-wrapper"> <PageTitle title="商品列表" ...
- React后台管理系统-用户列表页面
1.页面的结构 //遍历list, 返回数据 let listBody= this.state.list.map((user,index)=> { return ...
- 《React后台管理系统实战 :三》header组件:页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数
一.布局及排版 1.布局src/pages/admin/header/index.jsx import React,{Component} from 'react' import './header. ...
- React后台管理系统-订单管理
1.订单管理页面和商品管理页面类似,都是一个搜索组件+列表组件 2.搜索框search组件 import React from 'react'; class ListSearch extends ...
- 修改ECSHOP后台的商品列表里显示该商品品牌
如何在在ECSHOP后台的商品列表中也显示商品的品牌”.下面就来最模板讲一下如何来修改.此方法只保证在ECSHOP2.7.2版本下有效,其他版本请参照修改. 第一步:首先我们来打开程序文件: /adm ...
- 《React后台管理系统实战 零》:基础笔记
day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- React后台管理系统-table-list组件
table-list组件可用于商品列表,用户列表页面 需要传入一个tableHeads集合和tablebody import React from 'react'; // 通用的列表 class ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
随机推荐
- oracle odbc连接sqlserver 无法查询字段
最近因项目需要,需要在oracle数据库里面通过DBLINK方式链接SQLserver数据库(oracle 11G,Sqlserver2016,具体实现参考链接 http://blog.sina.co ...
- 因为.patch_storage目录丢失,导致opatch打补丁失败
一套新装的ORACLE Restart环境(11.2.0.3.0),计划最新的PSU,在使用opath auto方式安装补丁时报错,表面上的错误信息提示opatch工具不满足版本要求: [root@d ...
- vue中点击空白处隐藏弹框(用指令优雅地实现)
在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...
- 得到RequestVO
import java.io.IOException; import java.nio.charset.Charset; import javax.servlet.ServletInputStream ...
- idea中导入githup项目
转载大神: https://blog.csdn.net/m0_37630602/article/details/69950528
- excel单元格内容拆分
这几天在整理数据,但是数据都在表格的一个单元格中,看起来很不方法,所以在网上找到excel单元格内如拆分的方法,并亲测有效 介绍2种拆分的方法 方法一: (1)在B1输入公式=right(text,[ ...
- py---------模块和包
单独导入包 单独导入包名称时不会导入包中所有包含的所有子模块,如 #在与glance同级的test.py中 import glance glance.cmd.manage.main() ''' 执行结 ...
- jquery——解决鼠标移入移出导致盒子不停移动的bug
使用mouseover().mouseout()时会出现这样一种情况,鼠标快速多次移入移出后这个盒子会在鼠标不动后继续运动 代码如下: <!DOCTYPE html> <html l ...
- Unity Download Assistant Error: 'SendRequest Error' while downloading ini file from http://files.unity3d.com/bootstrapper/29055738eb78/unity-5.3.6f1-win.ini
Unity 官网的哥们如此说道 I open the exe on Compatibility Mode , it's solved. You can try. :) 翻译就是 我用兼容模式打开,就能 ...
- Java排序算法(三)
Java排序算法(三) 三.Java排序算法总结 从这三组时间复杂度对比中,可以看出,堆排序和归并排序是不管在什么情况下发挥稳定的,快速排序好的时候表现如天才,坏情况下比较差强人意,甚至在等待排序个数 ...