React article Search Bar and content Table

We're going to build a module that contains a table of contents, then a field that provides search, and listens to the input field in search, triggering search and then filtering the contents of the content table when there is a change.

Demo link:http://czrmodel.mybluemix.net/catalog.html (by the way IBM Bluemix, is the IBM cloud, now all free Oh, unlike Aliyun, Bluemix has a lot of services, No need to take your own application server and DB, Aliyun directly to you a virtual machine, and then through the SSH link or VPN link, all the services are installed on their own. Aliyun needs to do a little bit more, and Bluemix has more services to encapsulate. Everyone look at their own situation to choose, for want to do try and learn friends or use free Bluemix bar, when you really want to deploy the environment, or should consider Aliyun, because after all, he belongs to the domestic server, fast speed. )

This is a very high-usage component. Let's look at the end first.

Content 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"}
];

Overall structure:

<div classname= "Fitlerproducttable" >
<searchbar Filtertext={this.state.filtertext} instockonly={this.state.instockonly} onUserInput={ this.handleuserinput}/>//Blue Box
<producttable data={this.props.data} Filtertext={this.state.filtertext} instockonly={this.state.instockonly}/ >//Green Box
</div>

For 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>

For 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);

In fact, it is not that other frameworks can not be achieved, just feel that the react modular more clear, step by step definition, so that the entire module looks more unified structure, but also better understanding.

React article Search Bar and content Table