[原创] react初探(三)

react reflux shop cart

2015-08-18 1865

使用react+reflux实现产品列表和购物车的前端功能,包含购物车中商品删除,购物车中商品数量的改变。关于和后端代码结合部分没有做实现,这个是纯前端的代码,后端部分不做阐述,只需要做一个简单的ajax操作就好。

由于是以测试为主,代码中会包含很多的控制台输出

1.创建actions


//购物车actions,使用reflux实现;当数据改变的时候派发事件,所有监听事件的位置做出view的改变
var actions = Reflux.createActions(["cartChange", "removeFromCart"]); 


2.创建store部分 

var store = Reflux.createStore({
    cart_list:[{id: "1", name: "三菱 BCD-205TF1 205升三门冰箱家用", img: "ad/ad1.jpg",count:1},
        {id: "2", name: "三菱 BCD-205TF1 205升三门冰箱家用", img: "ad/ad2.jpg",count:2},
        {id: "3", name: "三菱 BCD-205TF1 205升三门冰箱家用", img: "ad/ad3.jpg",count:1}
    ],
    listenables: actions,
    init: function () {
        console.log('store init');   /////init store end
    },
    getInitialState: function () {
        console.log('cart_store init');  //////init state end
        return this.cart_list;
    },
    onCartChange: function (count, p_info) {
        var item_find = _.find(this.cart_list, function (item) {
            return item.id == p_info.id;
        });
        if (item_find) {
            var tem_index = _.indexOf(this.cart_list, item_find);
            this.cart_list[tem_index].count = count;
            this.cart_list[tem_index].id = p_info.id;
            this.cart_list[tem_index].name = p_info.name;
            this.cart_list[tem_index].img = p_info.img;
        }
        else {
            var item_p = new Object();
            item_p.id = p_info.id;
            item_p.count = count;
            item_p.name = p_info.name;
            item_p.img = p_info.img;
            this.cart_list.push(item_p);
        }

        //state.cart_data = "当前购物车"+count;
        this.trigger(this.cart_list);
    },
    onRemoveFromCart: function (data) {
        this.cart_list = data;
        this.trigger(this.cart_list);
    }
});


3.创建控件部分

var ShopCartView = React.createClass({
    mixins: [Reflux.connect(store, 'cart_data')],
    render: function () {
        return (
            <div>
                <HeaderView label="购物车"/>

                <div className="container">
                    <div className="prolist mycart">
                        {this.state.cart_data.map(function (item) {
                            return (
                                <ProductItem current_count={item.count} shop_cart="true" name={item.name} id={item.id}
                                             img={item.img}/>
                            );
                        })}

                    </div>

                    <div className="btmline"></div>
                    <FooterView/>

                </div>
            </div>
        );
    }
});

//////单条商品信息
var ProductItem = React.createClass({
    mixins: [Reflux.connect(store, 'cart_data')],
    getInitialState: function () {
        return {
            current_count: this.props.current_count
        }
    },
    handleAddCart: function (e) {
        console.log(this.props);
        console.log(this.state);
        this.state.current_count = this.state.current_count + 1;
        actions.cartChange(this.state.current_count, this.props);
    },
    handleReduceCart: function (e) {
        if (this.state.current_count <= 1) {
            alert("购买产品数量不能小于1");
            return false;
        }
        console.log(this.props);
        console.log(this.state);
        this.state.current_count = this.state.current_count - 1;
        actions.cartChange(this.state.current_count, this.props);
    },
    handleRemoveFromCart: function () {
        var tem_id = this.props.id;
        var find_item = _.find(this.state.cart_data, function (item) {
            return item.id == tem_id;
        });
        this.state.cart_data = _.difference(this.state.cart_data, [find_item]);/////删除指定的元素
        actions.removeFromCart(this.state.cart_data);
    },
    render: function () {
        var tem_url = "#prodetail/"+this.props.id;
        return (
            <dl>
                <dt><a href={tem_url} params={{id:this.props.id}}><img src={this.props.img}/></a></dt>
                <dd>
                    <h3><a href={tem_url} params={{id:this.props.id}}>{this.props.name}</a></h3>

                    <div className="list_price">
                        <span>内部特购价:<em>¥2000</em></span>

                        <div className="num">
                            <a className="plus" href="javascript:void(0)" onClick={this.handleReduceCart}>-</a>
                            <input type="text" value={this.state.current_count}/>
                            <a className="plus" href="javascript:void(0)" onClick={this.handleAddCart}>+</a>
                        </div>
                    </div>
                </dd>
                {
                    this.props.shop_cart ?
                        <a onClick={this.handleRemoveFromCart} className="close" href="javascript:void(0)"><img
                            width="17" src="images/close.png"/></a> : ""
                }
            </dl>
        );
    }
});