react经典进阶demo

这是我在官方文档上看到的,功能是实现(具体是什么，请往下看)

以下是json数据:

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

显示红色的物品，是没有库存的(stocked:false),如$29.99的basketball和$399.99的iphone5。

在我看来react的结构就像‘包饺子’，一层夹着一层，可以看一下上图的几个边框，不同颜色代表着不同区域划分。

1.(orange): contains the entirety of the example 外边的黄色区域，包含整个例子。

2.(blue): receives all user input  里面一层的蓝色框框，度用户的输入进行serach。

3.(green): displays and filters the data collection based onuser input   绿色框展示用户筛选的物品信息。

4. (turquoise): displays a heading for each category  显示产品种类，这里是sproting goods和electronics。

5.(red): displays a row for each product  红色框，每件物品。

 //这是结构的最外一层  它里面包含searchBar和producTable两个组件
 var FilterableProductTable = React.createClass({
   render: function() {
     return (
       <div>
         <SearchBar />
         <ProductTable products={this.props.products} />
       </div>
     );
   }
 });

 var PRODUCTS = [
   {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'}
 ];
  //这里的prop属性定义了product  引用字上面的json数据
 ReactDOM.render(
   <FilterableProductTable products={PRODUCTS} />,
   document.getElementById('container')
 );

 //这是最简单的搜索框组件
 var SearchBar = React.createClass({
   render: function() {
     return (
       <form>
         <input type="text" placeholder="Search..." />
         <p>
           <input type="checkbox" />
           {' '}
           Only show products in stock
         </p>
       </form>
     );
   }
 });

 //关键的来了  这个productTable里面还包含了一些组件
 var ProductTable = React.createClass({
   render: function() {
     var rows = [];
     var lastCategory = null;
     //遍历json数据
     this.props.products.forEach(function(product) {
       if (product.category !== lastCategory) {  //注意这里的判断，并不是每回都要把类别加一次
        //这里有一个产品种类的组件
       rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
       }
       //还有一个产品行的组件
       rows.push(<ProductRow product={product} key={product.name} />);
       lastCategory = product.category;
     });
     return (
       <table>
         <thead>
           <tr>
             <th>Name</th>
             <th>Price</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>
       </table>
     );
   }
 });

 //category在上面可以找到
 var ProductCategoryRow = React.createClass({
   render: function() {
     return (<tr><th colSpan="2">{this.props.category}</th></tr>);
   }
 });

 var ProductRow = React.createClass({
   render: function() {
     //如果没有货存  红色字体显示
    var name = this.props.product.stocked ?
       this.props.product.name :
       <span style={{color: 'red'}}>
         {this.props.product.name}
       </span>;
     return (
       <tr>
         <td>{name}</td>
         <td>{this.props.product.price}</td>
       </tr>
     );
   }
 });

就这样玩了吗？还没有，以上还没实现搜索和过滤功能。

 var ProductCategoryRow = React.createClass({
   render: function() {
     return (<tr><th colSpan="2">{this.props.category}</th></tr>);
   }
 });

 var ProductRow = React.createClass({
   render: function() {
     var name = this.props.product.stocked ?
       this.props.product.name :
       <span style={{color: 'red'}}>
         {this.props.product.name}
       </span>;
     return (
       <tr>
         <td>{name}</td>
         <td>{this.props.product.price}</td>
       </tr>
     );
   }
 });   //这里都没变

 //注意这里有改动
 var ProductTable = React.createClass({
   render: function() {
     var rows = [];
     var lastCategory = null;
     this.props.products.forEach(function(product) {
     //用于过滤产品(用户输入的关键字和库存)
       if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) { //注意此处的逻辑
         return;
       }
       if (product.category !== lastCategory) {
         rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
       }
       rows.push(<ProductRow product={product} key={product.name} />);
       lastCategory = product.category;
     }.bind(this));  //由于函数里面用到了this  这里bind一下
     return (
       <table>
         <thead>
           <tr>
             <th>Name</th>
             <th>Price</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>
       </table>
     );
   }
 });

 //serachBar现在膨胀了  这么多
 var SearchBar = React.createClass({
   handleChange: function() {
      //上面肯定有个函数  肯定在父组件上
       this.props.onUserInput(
       this.refs.filterTextInput.value,
       this.refs.inStockOnlyInput.checked  //注意这里的ref用法
     );
   },
   render: function() {
     return (
       <form>
         <input
           type="text"
           placeholder="Search..."
           value={this.props.filterText}
           ref="filterTextInput"
           onChange={this.handleChange} //文本改变回调事件  它的作用是什么？  下面有答案
         />
         <p>
           <input
             type="checkbox"
             checked={this.props.inStockOnly}
             ref="inStockOnlyInput"
             onChange={this.handleChange} //checkbox的判断
           />
           {' '}
           Only show products in stock
         </p>
       </form>
     );
   }
 });

 //关键的来了   这个里面就是饺子皮
 var FilterableProductTable = React.createClass({
   getInitialState: function() {
     return {
       filterText: '',
       inStockOnly: false
     };
   },  //这里初始化的state  文本为空  默认checkbox=false

   handleUserInput: function(filterText, inStockOnly) {
     this.setState({
       filterText: filterText,
       inStockOnly: inStockOnly
     });
   },

   render: function() {
     return (
       <div>
         <SearchBar
          //prop定义的的位置  可以对照着看
           filterText={this.state.filterText}
           inStockOnly={this.state.inStockOnly}
           onUserInput={this.handleUserInput} //这个函数用于改变初始state
         />
         //prop定义的位置  要注意这里的ProductTable里面的filterText和instockOnly  是随着serachBar的输入变动的
         <ProductTable
           products={this.props.products}
           filterText={this.state.filterText}
           inStockOnly={this.state.inStockOnly}
         />
       </div>
     );
   }
 });

 var PRODUCTS = [
   {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'}
 ];

 ReactDOM.render(
   <FilterableProductTable products={PRODUCTS} />,
   document.getElementById('container')
 );

好了，代码量并不大，但是这里面的逻辑和每层之间的关系确实有点搞人呀。。。希望大家看懂了react想表达的是什么