我們要構建一個模塊，其中包含一個內容顯示的表格，然后上面有一個提供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

總結

以上是生活随笔為你收集整理的React 篇 Search Bar and content Table的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。