React购物车

React用数据驱动实现购物车

页面效果

var app = document.getElementById('app');

    var App = React.createClass({
        render:function () {
            return(
                <div className="wrap">
                    {/*商品*/}

                    {
                        this.state.cart.map((item,index)=> {
                            return(
                                    <div className="commodity clearfix" key={index}>
                                        <div className="checkBox fl">
                                            <input className="check" type="checkbox" checked={this.state.cart[index].isChecked} onChange={()=>{this.checkOne(index)}}/>
                                        </div>
                                        <div className="pic fl">
                                            <img src={this.state.cart[index].thumbnail} alt="#"/>
                                        </div>
                                        <div className="txt fl">
                                            <h3>{this.state.cart[index].name}</h3>
                                            <p>剩余库存：{this.state.cart[index].stock}</p>
                                            <p>￥<span>{this.state.cart[index].reduct_price}</span></p>
                                        </div>
                                        <div className="num">
                                            <button onClick={()=>{this.calcDown(index)}}>-</button>
                                            <input ref="refNum" type="text" value={this.state.cart[index].num} onChange={this.changeNum.bind(this,index)}/>
                                            <button onClick={()=>{this.calcUp(index)}}>+</button>
                                        </div>
                                    </div>
                            )
                        })
                    }
                    

                    {/*底部*/}
                    <div className="footer clearfix">
                        <div className="allCheckBox fl">
                            <input className="allCheck" type="checkbox" checked={this.state.allChecked} onChange={this.allCheckf}/>
                            <span>全选</span>
                        </div>
                        {/*结算*/}
                        <a className="btn fr" href="#">去结算(<span>{this.state.amount}</span>件)</a>
                        {/*合计*/}
                        <div className="agg fl">
                            <div className="allPrice">
                                总计:<span id="price">{this.state.totalPrices}</span>
                            </div>
                            {/*优惠 discounts*/}
                            <div className="discounts">
                                不含运费，已优惠 <span>￥{this.state.discounts}</span>
                            </div>
                        </div>
                    </div>
                </div>
            )
        },

方法

componentDidMount:function () {
            var that = this;
            $.ajax({
                type:'get',
                url:'./json.json',
                async:true,
                success:function (res) {
                    if(res.success && res.code == 200){
//                        console.log(res);
                        var cart = res.list;
                        for(var i=0;i<cart.length;i++){
                            cart[i].isChecked = false;
                        }
                        that.setState({
                            cart:cart
                        })
                    }
                }
            })
        },
        getInitialState:function () {
            return{
                totalPrices:0,//代表总价
                amount:0,//代表选中的商品数量
                discounts:'0.00',//已优惠多少
                allChecked:false,//代表全选按钮的值
                cart:[]
            }
        },
        checkOne:function (index) {
            var cart = this.state.cart;
            cart[index].isChecked = !cart[index].isChecked;

//            判断全部商品是否被勾选上
            var allChecked = true;
            for(var i=0;i<cart.length;i++){
//                只要有一个没选中就为false
                if(!cart[i].isChecked){
                    allChecked = false;
                    break;
                }
            }
            this.setState({
                cart:cart,
                allChecked:allChecked
            });

//            调用计算总价
            this.calcAll();

        },
        allCheckf:function (event) {
            var allChecked = !this.state.allChecked;
            var cart = this.state.cart;
            for(var i=0;i<cart.length;i++){
                cart[i].isChecked = allChecked;
            }
            this.setState({
                allChecked:allChecked,
                cart:cart
            });

//            调用计算总价
            this.calcAll();
        },
        changeNum:function (index,event) {
//            这个代表手动输入的值
//            console.log(index);
//            console.log(event);


//          商品数量框输入验证
            if(!isNaN(Number(event.target.value))){
                 num = event.target.value.trim();
//                console.log(event.target.value.length);
                if(event.target.value.length == 0){
//                    console.log("触发");
                    var num = 0;
                }
//                console.log(num);
                if(event.target.value.slice(0,1)==0&&event.target.value.length>1){
                    num = event.target.value.slice(1);
                }
                var cart = this.state.cart;
                cart[index].num = num;
                this.setState({
                    cart:cart
                })
            }

//            调用计算总价
            this.calcAll();
        },
//        按钮数量减法
        calcDown:function (index) {
            var num = this.state.cart[index].num;
            num = num - 1;
            num = num<0?0:num;
            var cart = this.state.cart;
            cart[index].num = num;
            this.setState({
                cart:cart
            });

//            调用计算总价
            this.calcAll();
        },
        calcUp:function (index) {
            var num = this.state.cart[index].num;
//            num---input框手动输入后类型为字符串，故进行类型转换
            num = num*1 + 1;
            var cart = this.state.cart;
            cart[index].num = num;
            this.setState({
                cart:cart
            });
//            调用计算总价
            this.calcAll();
        },
//        计算总价
        calcAll:function () {
            var totalPrices = 0;
            var cart = this.state.cart;
            for(var i=0;i<cart.length;i++){
                if(cart[i].isChecked){
                    totalPrices += cart[i].reduct_price * cart[i].num;
                }
            }
            this.setState({
                totalPrices:totalPrices
            });
//            调用计算选中商品数量
            this.sumAmount();
//            调用计算优惠的价格
            this.discountsFn();
        },
//        计算选中商品数量
        sumAmount:function () {
            var amount = 0;
            var cart = this.state.cart;
            for(var i=0;i<cart.length;i++){
                if(cart[i].isChecked){
                    amount += parseInt(cart[i].num);
                }
            }
            this.setState({
                amount:amount
            })
         },
//        计算已优惠多少
        discountsFn:function () {
            var discounts = 0;
            var cart = this.state.cart;
            for(var i=0;i<cart.length;i++){
                if(cart[i].isChecked){
                    discounts += cart[i].num * (cart[i].original_price-cart[i].reduct_price);
                }
            }
            this.setState({
                discounts:discounts
            })
        } 
    });