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模块化更加清晰，一步一步定义，使整个模块看起来结构比较统一，也更好理解。