zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [CF-Edu113]D. Inconvenient Pairs
    第3组团队Git现场编程实战
    团队项目-选题报告
    第一次个人编程作业
    第一次软工博客作业
    (二十二)python 3 sort()与sorted()
    (二十一)python 3 内置函数
    (二十)python 3 匿名函数
    (十九)python 3 内嵌函数和闭包
    (十八)python 3 回调函数
  • 原文地址:https://www.cnblogs.com/Jerry1985/p/6553850.html
Copyright © 2011-2022 走看看