react 購物車實現(xiàn)部分商品結(jié)算

問題

• 如何計算被選中商品的總價，當商品數(shù)量發(fā)生改變
  情景：當超過一個以上的商品被選中時可以監(jiān)聽到所有選中商品的價格，但是如果修改其中一個商品數(shù)量時，只監(jiān)聽到了被修改商品的信息。

圖片描述

修改數(shù)量前勾選都可以監(jiān)聽到

只監(jiān)聽到修改的

我需要當check box 狀態(tài)改變時，total 數(shù)量發(fā)生相應(yīng)變換。如果一個選中的產(chǎn)品數(shù)量變化時total也發(fā)生相應(yīng)改變

結(jié)構(gòu)

ShopCart > CartRow

代碼

parent component: ShopCart

class ShopCart extends Component{
    constructor(...args){
        super(...args);
        var that = this;
        this.state={
            isChecked: false,
            checkedCount: 0,
            total: 0
        };

        this.item = Constant.productCart;
        this.number = 0;

        this.countChecked = (isChecked) => {
            this.setState({isChecked: isChecked});
            
            isChecked ?
                this.setState({checkedCount: this.state.checkedCount + 1})
                :
                this.setState({checkedCount: this.state.checkedCount - 1})

        }

        this.totalCheckedPrice = (isChecked, totalPrice) => {

            if(isChecked) {
                console.log(totalPrice);
            }

        }


    }
    componentWillMount() {

    }
    componentDidMount(){


    }

    render(){
        return(
            <form  className="shopCart contain">

                <Table condensed hover>
                    <thead>
                        <tr>
                            <th className="hiddenColumn">
                                <label>
                                    <input type="checkbox" className="check-all check"/>
                                </label>
                            </th>
                            <th colSpan="2">Product</th>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Total</th>
                            <th>Remove</th>
                        </tr>
                    </thead>
                    <tbody>
                    {
                        this.item.length > 0 &&
                            this.item.map((item, index) => {
                                return(
                                    <CartRow key={index}
                                             rowItem={item}
                                             countChecked = {this.countChecked}
                                             totalCheckedPrice = {this.totalCheckedPrice}
                                    />
                                )
                            })
                    }
                    </tbody>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th></th>
                            <th>
                                <span className="orangeButton">
                                    Empty Cart
                                </span>
                            </th>
                            <th  colSpan="2">
                                Selected
                                <span className="orangeText">
                                     {this.state.checkedCount}
                                </span>
                                Items
                            </th>
                            <th>Total:
                                <span className="orangeText">
                                    {this.state.total}
                                </span>
                            </th>
                            <th className="checkout">
                                <span>
                                    Checkout
                                </span>
                            </th>
                        </tr>
                    </tfoot>

                </Table>
                
            </form >

        )
    }
}

child component: CartRow

class CartRow extends Component{
    constructor(...args){
        super(...args);
        var that = this;
        this.state={
            isChecked: false,
            count: 1,
        };

        //input(text) value changed control
        this.handleChange = (event) => {

            this.setState({count: event.target.value });
        }
        this.increment = () => {
            this.setState({count: this.state.count + 1});
        }
        this.decrement = () => {
            if(this.state.count > 1) {
                this.setState({count: this.state.count - 1});
            }
        }

        //input checkbox value changed control
        this.onChangedAction = (event) => {

            this.setState({isChecked: event.target.checked})

            event.target.checked ?
                this.props.countChecked(true)
                :
                this.props.countChecked(false)
        }

        //subTotal price when input(text) value changed
        this.subTotal = () => {

            this.props.totalCheckedPrice(this.state.isChecked, Math.abs(this.state.count * this.props.rowItem.price))

            return Math.abs(this.state.count * this.props.rowItem.price);
        }

    }
    componentWillMount() {

    }
    componentDidMount(){

    }

    render(){
        return(
             <tr>
                 <td className="hiddenColumn">
                    <input type="checkbox"
                           checked={this.state.isChecked}
                           onChange={this.onChangedAction.bind(this)}/>
                 </td>

                 <td className="hiddenColumn">
                    <img src={this.props.rowItem.image} alt=""/>
                 </td>

                 <td data-column="Product">
                     {this.props.rowItem.title}
                 </td>

                 <td data-column="Price">
                     {this.props.rowItem.price}
                 </td>

                 <td className="count" data-column="Quality">

                    <span className='fa-stack reduce'
                          onClick={this.decrement.bind(this)}>

                        <Fontawesome name="minus" stack='1x'></Fontawesome>
                    </span>

                    <input type="text" className="count-input"
                           onChange={this.handleChange.bind(this)}
                           value={this.state.count}/>

                    <span className='fa-stack add'
                          onClick={this.increment.bind(this)}>

                        <Fontawesome name="plus" stack='1x'></Fontawesome>
                    </span>

                 </td>

                 <td className="subTotal" data-column="SubTotal">
                    {
                        this.subTotal()
                    }
                 </td>

                 <td data-column="Remover">
                     <span className='fa-stack'>
                          <Fontawesome name="trash-o" stack='1x'></Fontawesome>
                      </span>

                 </td>
            </tr>

        )
    }
}

數(shù)據(jù)結(jié)構(gòu)

exports.productCart= [
    {
        title: 'Hello my demo2',
        image: 'https://pbs.twimg.com/media/CwGgapPVUAA4u3Q.jpg',
        price:  76

    },
    {
        title: 'Hello my demo2',
        image: 'http://i.imgur.com/RRUe0Mo.png',
        price:  676

    },
    {
        title: 'Pasifika Early Childhood CD (with printed lyrics)',
        image: 'https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg',
        price:  234

    },
    {
        title: 'Hello my demo2',
        image: 'http://mblogthumb1.phinf.naver.net/20121009_136/dogtalk__1349752474508pRuyE_JPEG/Puppy-Love-29817_large.jpg?type=w2',
        price:  788

    },
    {
        title: 'Hello my demo2',
        image: 'https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg',
        price:  96

    },
    {
        title: 'Hello my demo2',
        image: 'https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg',
        price:  67
    },
];