React 篇 Search Bar and content Table

我们要构建一个模块，其中包含一个内容显示的表格，然后上面有一个提供Search的栏位，并对Search中输入栏进行监听，当有改变的时候，触发Search然后对内容表中的内容进行过滤。

Demo Link:http://czrmodel.mybluemix.net/catalog.html (顺带推广一下IBM Bluemix，是IBM云，目前全免费哦，跟aliyun不一样的，Bluemix里面自带很多服务，不需要自己搭应用服务器和DB, aliyun直接给你一台虚拟机，然后通过ssh链接或者vpn链接，所有的服务都要自己安装。aliyun自己需要做的东西稍微多些，Bluemix封装好的服务更多一些。大家看自己的情况去选吧，对于想做尝试和学习的朋友还是用免费的Bluemix吧，当你真正想部署环境的话，还是应该考虑aliyun，因为毕竟他属于国内的服务器，网速快一些。)

这是一个使用率很高的组件。我们先看一下最终效果图。

内容json

var data=[
          {"category": "Sporting Goods", "price": "$49.99", "stocked": true, "name": "Football"},
          {"category": "Sporting Goods", "price": "$9.99", "stocked": true, "name": "Baseball"},
          {"category": "Sporting Goods", "price": "$29.99", "stocked": false, "name": "Basketball"},
          {"category": "Electronics", "price": "$99.99", "stocked": true, "name": "iPod Touch"},
          {"category": "Electronics", "price": "$399.99", "stocked": false, "name": "iPhone 5"},
          {"category": "Electronics", "price": "$199.99", "stocked": true, "name": "Nexus 7"}
        ];

整体结构：

针对SearchBar

　　　　<div className="SearchBar">
                   <input type="text" ref="filterTextInput" placeholder="Search..." value={this.props.filterText} onChange={this.handleChange}/>
                   <p><input type="checkbox" ref="inStockOnly" checked={this.props.inStockOnly} onChange={this.handleChange}></input>
                   Only show products in stock</p>
               </div>

针对 ProductTable

　　<table className="productTable">
       　　<thead>
       　　 <tr><th>Name</th><th>Price</th></tr>
      　　 {itemsList}
      　　 </thead>
       </table>

itemList :

其实也不是说其他框架不能实现，只是觉得React模块化更加清晰，一步一步定义，使整个模块看起来结构比较统一，也更好理解。

更多专业前端知识，请上【猿2048】www.mk2048.com

React 篇 Search Bar and content Table相关推荐

Search Bar On Browser_4
Search Bar On Browser 摘要: 本文介绍主流浏览器的搜索引擎插件标准.本文还解释如何在浏览器的添加搜索引擎插件. 本文内容: 简介一. Sherlock标准二. ...
vue商城项目源码_CMS全栈项目之Vue和React篇（下）（含源码）
今天给大家介绍的主要是我们全栈CMS系统的未讲解完的后台部分和前台部分,如果对项目背景和技术栈不太了解,可以查看我之前的文章基于nodeJS从0到1实现一个CMS全栈项目(上) 基于nodeJS从0 ...
前端面试 React篇（上）
一.组件基础 1. React 事件机制 <div onClick={this.handleClick.bind(this)}>点我</div> React并不是将click事 ...
前端学习之React篇-（1）最简React——Html直接引用React
当新手想看看React是什么样的,语法是什么样的,那么这里给出了一个最简单的使用React的方法--就是在html页面中直接引入React的js文件,然后在这个html中直接写react的js即可,简 ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
看完这篇文章保你面试稳操胜券——React篇
✨ 进大厂收藏这一系列就够了,全方位搜集总结,为大家归纳出这篇面试宝典,面试途中祝你一臂之力!,共分为四个系列 ✨ 本篇为 < 看完这篇文章保你面试稳操胜券 > ...
第 6 节：前端面试指南 — React 篇（附面试题答案）
更新完「Vue篇」之后,上周的出差去了一趟南京,很多读者朋友都在微信催更了. 前 5 期没看的同学,建议先看完再来看这一期的,传送门: 第 1 期:「简历篇」含简历模板文件第 2 期:「HTML篇」 ...
前端知识体系(7)-react篇
1.什么是 React React是一个简单的javascript UI库,用于构建高效.快速的用户界面.它是一个轻量级库,因此很受欢迎.它遵循组件设计模式.声明式编程范式和函数式编程概念,以使前端应 ...
react在线浏览doc_CodeMirror代码编辑器（react篇）
简介 CodeMirror 是一款在线的支持语法高亮的代码编辑器,官网地址:https://codemirror.net/ 安装 npm install react-codemirror2 codem ...

React 篇 Search Bar and content Table

React 篇 Search Bar and content Table相关推荐

最新文章

热门文章