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"}
        ];

整体结构:

    <div className="fitlerProductTable" >
                  <SearchBar filterText={this.state.filterText}  inStockOnly={this.state.inStockOnly} onUserInput={this.handleUserInput}/> //蓝色框
                  <ProductTable data={this.props.data}  filterText={this.state.filterText} inStockOnly={this.state.inStockOnly} />  //绿色框
                </div>

针对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 :

var cata=null;
        var itemsList=[];
        var a=this.props.filterText;
        this.props.data.forEach(function(item){
        
            if(item.name.indexOf(this.props.filterText) ==-1 || (this.props.inStockOnly && !item.stocked)){
                return;
            }
            if(item.category !=cata){
                cata=item.category;
                itemsList.push(<CataRow catagory={cata}/>);
            }
            itemsList.push(<ProductRow productName={item.name} price={item.price} stocked={item.stocked}/>);
        },this);

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


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PrimeFaces:在动态生成的对话框中打开外部页面

我已经在即将出版的PrimeFaces Cookbook 2版中写了一篇关于食谱的博客。 在这篇文章中&#xff0c;我想发表第二篇关于一个名为Dialog Framework的小型框架的文章。 我个人喜欢它&#xff0c;因为我记得我为使用Struts框架付出同样的努力而付出的代价。 当您想将外部页面加载到…

ctags: 提示错误ctags: unrecognized option '--format=2'

ctags&#xff1a; 提示错误ctags: unrecognized option --format2 原来的 taglist 插件用的好好的&#xff0c;自从安装了 emacs 之后&#xff0c;每次触发 taglist 都提示以下错误&#xff1a; Taglist: Failed to generate tags for ....(a file) ctags: unrecognized optio…

vue-router之 beforeRouteEnter

beforeRouteEnter在每次路由切换都执行 ,而项目优化后,切换路由mounted只在最开始执行一次beforeRouteEnter的具体用法可参考官方文档 https://cn.vuejs.org/v2/guide/migration-vue-router.html#activate-替换 需要注意的是&#xff1a;在这期间路由跳转携带的数据发生改变会影…

突破极限–如何将AeroGear Unified Push用于Java EE和Node.js

在2014年底的AeroGear队宣布红帽的JBoss统一推送服务器的可用性xPaaS 。 让我们仔细看看&#xff01; 总览 统一推送服务器允许开发人员将本地推送消息发送到Apple的推送通知服务&#xff08;APNS&#xff09;和Google的云消息传递&#xff08;GCM&#xff09;。 它具有一个内…

sqlserver 中事务与错误机制的处理

成功返回1并提交事务,错误返回0并回滚事务 BEGIN try begin tran --其中userName为varchar类型,数据库中该字段存在不为int类型的数据,必然导致错误 update WebOA_User_t SET UserNameUserName where UserName1 select 1 commit tran end try begin catch select 0 r…

js 获取json数组里面数组的长度

作为一个前端页面开发者第一次处理json数据&#xff0c;遇到了‘js 获取json数组里面数组的长度’&#xff1f;竟然不知道 json没有.length属性&#xff08;真是要嘲讽下自己&#xff09;&#xff0c;少壮不努力老大徒伤悲啊&#xff01;以前都是去寻求男朋友帮助&#xff0c;但…

针对WildFly和EAP运行Java Mission Control和Flight Recorder

Java Mission Control &#xff08;JMC&#xff09;使您可以监视和管理Java应用程序&#xff0c;而无需引入通常与这些类型的工具相关的性能开销。 它使用为正常的JVM动态优化而收集的数据&#xff0c;从而形成了一种非常轻量级的方法来观察和分析应用程序代码中的问题。 JMC由…

C#堆栈和堆的讲解

OS和CLR通常将用于容纳数据的内存划分为两个独立的区域&#xff0c;每个区域都采用截然不同的方式来管理&#xff1a;堆栈&#xff08;Stack&#xff09;和堆&#xff08;heap&#xff09;。&#xff08;1&#xff09; 调用一个方法时&#xff0c;它的参数以及它的局部变…

jQuery中的常用内容总结(一)

jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠)&#xff0c;由于回家看病以及处理一些其它事情耽搁了&#xff0c;不然这篇博客本该上上周或者上周写的&#xff1b;同时闲谈几句&#xff1a;在这里建议各位开发的童鞋&#xff0c;如果有疾病尽快治疗&#xff0c;不要拖&a…

关于Firefox在Win8下界面显示错乱的解决方法

最近又把Windows8安装上&#xff0c;由于平常做前端开发用的最多的还是Firefox&#xff0c;因此在家的机器上也安装上Firefox&#xff0c;但使用中发现Firefox界面老是错误&#xff0c;特别是那种乱套的颜色&#xff0c;不得其解&#xff0c;查看设置发现默认启用了硬件加速&am…

react ant design路由配置

最初的时候&#xff0c;只使用了antd中的menu&#xff0c;header和footer都是自己写的组件&#xff0c;在写路由时&#xff0c;总是报如下错误&#xff1a; 相关的路由配置如下&#xff1a; 在网上查的说是组件未暴露出去或者是return 这一行必须有个括号或者标签&#xff0c;我…

线程魔术技巧:Java线程可以做的5件事

Java线程最鲜为人知的事实和用例是什么&#xff1f; 有些人喜欢爬山&#xff0c;有些人喜欢跳伞。 我&#xff0c;我喜欢Java。 我喜欢它的一件事是&#xff0c;您永不停止学习。 您每天使用的工具通常可以向您展示全新的方面&#xff0c;以及您还没有机会看到的方法和有趣的用…

强制删除tfs未迁入项的两个方法。

方法1&#xff1a; 打开Vs2008的命令提示&#xff1a; 查看用户的工作区&#xff1a; 输入&#xff1a; Tf workspaces /owner:所有者或* /server:服务器名称或IP ex: tf workspaces /owner:stcct(所有者) /server:203.156.1.100(Ip地址) 删除用户的未迁入项&#xff1a; 输…

VUE 全选

<div id"vue_det"> <p>全选:</p> <input type"checkbox" id"checkbox" v-model"checked" change"changAllChecked"/> <label for"checkbox"> {{checked}} <…

RabbitMQ –使用Spring集成Java DSL串行处理消息

如果您曾经需要使用RabbitMQ来串行处理消息&#xff0c;并且有一群监听器来处理消息&#xff0c;那么我所看到的最好方法是在监听器上使用“独占消费者”标志&#xff0c;每个监听器上有1个线程来处理消息。 专用使用者标志可确保只有1个使用者可以从特定队列中读取消息&#…

添加删除约束脚本 ::fn_get_sql

添加约束&#xff1a;alter table table1 add constraint pk_name primary key (name) --添加主健约束,名称作为主健&#xff1b; alter table table1 add constraint pk_name unique (name) --添加唯一约束,…

jquery 实现 点击把数据移动右侧 点击再次移回到左侧

2018年第一发 希望新的一年和大家一下学习更多知识 JS&#xff1a;//把数据左边挪到了右边&#xff0c;再从右边移动回来function moveOption(e1, e2){ $("#" e1 " option").each(function(){ if($(this).is(:selected)){ var oVal…

企业Java中事务隔离级别的初学者指南

介绍 基于ACID事务属性的关系数据库强一致性模型。 在本文中&#xff0c;我们将阐明对资源本地事务和JTA事务使用不同的事务隔离级别和各种配置模式的背后原因。 隔离和一致性 在关系数据库系统中&#xff0c;原子性和持久性是严格的属性&#xff0c;而一致性和隔离性或多或少…

点击左侧跳到右侧

效果图 JS部分 function moveOption(e1, e2){ try{ for(var i0;i<e1.options.length;i ){ if(e1.options[i].selected){ var e e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); iii-1 } } } catch(e){}} HTML以及CSS部分 <for…

好的微服务架构=企业服务总线(ESB)的灭亡?

这些天&#xff0c;似乎每个人都在谈论微服务。 您可以在数百篇文章和博客文章中读到很多有关该主题的文章&#xff0c;但是我建议的出发点是Martin Fowler的这篇文章 &#xff0c; 该文章引发了有关这种新建筑概念的大量讨论。 本文介绍了创建良好的微服务体系结构所面临的挑战…