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模組化更加清晰，一步一步定義，使整個模組看起來結構比較統一，也更好理解。

React 篇 Search Bar and content Table