REACT 学习之一：普通表单过滤 

---------------------可爱的分割线---------------------------------------
以下JS文件和CSS文件请自行替换,product.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":true,"name":"Basketball"},
  {"category":"Electronics Goods","price":"$99.99", "stocked":false,"name":"iPod Touch"},
  {"category":"Electronics Goods","price":"$399.99","stocked":true,"name":"iPhone 5"},
  {"category":"Electronics Goods","price":"$199.99","stocked":false,"name":"Nexus 7"},
  {"category":"PC Goods",         "price":"$39.99", "stocked":false,"name":"IBM x2005"},
  {"category":"PC Goods",         "price":"$19.99", "stocked":false,"name":"IBM x2008"}
]
---------------------可爱的分割线---------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <script src="react-demos/build/react.js"></script>
    <script src="react-demos/build/react-dom.js"></script>
    <script src="react-demos/build/browser.min.js"></script>
    <script src="react-demos/build/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
    <link rel="stylesheet" href="react-demos/build/bootstrap.css" />
    <style>
      body{
        font-family:"microsoft yahei";
        padding:20px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel">

      var Product = React.createClass({
        getInitialState:function(){
          return ({data:[],onlyStocked:false,filterWord:""})
        },
        componentDidMount:function(){
          $.ajax({
            url:this.props.url,
            dataType:"json",
            success:function(data){
              this.setState({data:data});
            }.bind(this),
            error:function(xhr,status,err){
              console.error(this.props.url,status,err.toString());
            }.bind(this)
          })
        },
        onlyStock:function(bool){
          this.setState({onlyStocked:bool});
        },
        handleFilter:function(word){
          this.setState({filterWord:word});
        },
        render:function(){
          return (
          <div>
          <SearchBox onlyStocked={this.onlyStock} sendFilter={this.handleFilter}/>
          <ProductList data={this.state.data} onlyStock={this.state.onlyStocked} filter={this.state.filterWord}/>
          </div>
          )
        }
      });

      var SearchBox = React.createClass({
        handleChange:function(e){
          this.props.onlyStocked(e.target.checked);
        },
        handleInput:function(e){
          this.props.sendFilter(e.target.value);
        },
        render:function(){
          return (
          <div>
            <p><input type="text" placeholder="Search..."  onChange={this.handleInput}/></p>
            <p><label><input type="checkbox" onChange={this.handleChange}/>Only show products in stock</label></p>
          </div>
          )
        }
      });

      var ProductList = React.createClass({
        render:function(){
          var nowCategory = "";
          var listDetails =[];
          var onlyStock = this.props.onlyStock;
          var filterWord = this.props.filter;
          this.props.data.map(function(value){
            if(value.category!==nowCategory){
              if(onlyStock){
                if(value.stocked){
                  listDetails.push(
                <CategoryTable product={value}/>
                )
                  listDetails.push(
                <ListTable product={value} filter={filterWord}/>
                )
                  nowCategory=value.category;
                }
              }else{
                listDetails.push(
              <CategoryTable product={value}/>
              )
                listDetails.push(
              <ListTable product={value} filter={filterWord}/>
              )
                nowCategory=value.category;
              }
              }
            else{
              if(onlyStock){
                if(value.stocked){
                  listDetails.push(
                <ListTable product={value} filter={filterWord}/>
                )
                }
              }else{
                listDetails.push(
              <ListTable product={value} filter={filterWord}/>
              )
              }

            }

          });
          return (
          <table>
          <thead>
          <tr>
          <th>name</th><th>Price</th>
          </tr>
          </thead>
          <tbody>
                  {listDetails}
          </tbody>
          </table>
          )
        }
      });

      var CategoryTable = React.createClass({
        render:function(){
          return (
          <tr>
          <td colspan="2"><b>{this.props.product.category}</b></td>
          </tr>
          )
        }
      });

      var ListTable = React.createClass({
        render:function(){
          if(this.props.filter){

           if(this.props.product.name.toLowerCase().indexOf(this.props.filter.toLowerCase())!==-1){
             return(
           <tr className={this.props.product.stocked?"":"text-danger"}><td>{this.props.product.name}</td><td>{this.props.product.price}</td></tr>
           )
           }else{
             return null;
           }
          }else{
            return(
          <tr className={this.props.product.stocked?"":"text-danger"}><td>{this.props.product.name}</td><td>{this.props.product.price}</td></tr>
          )
          }
        }
      });


      ReactDOM.render(<Product url="product.json"/>,document.getElementById("container"));

    </script>
  </body>
</html>

posted on 2017-03-15 13:54  32岁学编程  阅读(643)  评论(0)    收藏  举报

导航