React 篇 Search Bar and content Table

逃离我推掉我的手 2023-06-11 11:29 18阅读 0赞

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

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

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

![Image 1][]

内容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**

[Image 1]: