我们要构建一个模块，其中包含一个内容显示的表格，然后上面有一个提供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
