react实现购物车（方法一）

Cart.jsx组件

import React, { Component } from 'react'
import Prolist from './Prolist'
export default class Cart extends Component {
    state = {
        carts: [
            { id: 1, name: '足球鞋', price: 25, count: 1, isChecked: false },
            { id: 2, name: '篮球鞋', price: 35, count: 1, isChecked: false },
            { id: 3, name: '草鞋', price: 125, count: 1, isChecked: false }
        ],
        // 总价
        total: 0,
        // 全选状态
        allCheckStatus: false
    }
    // 加
    add = (id) => {
        let carts = [...this.state.carts];
        carts.forEach(item => {
            if (item.id === id) {
                item.count++;
            }
        });
        this.setState({ carts }, () => {
            this.updateTotal();
        });
    }
    // 减
    reduce = (id) => {
        let carts = [...this.state.carts];
        carts.forEach(item => {
            if (item.id === id) {
                if (item.count > 1) {
                    item.count--;
                }
            }
        });
        this.setState({ carts }, () => {
            this.updateTotal();
        });
    }
    // 选中状态改变
    onCheckStatus = (id) => {
        let carts = [...this.state.carts];
        carts.forEach(item => {
            if (item.id === id) {
                item.isChecked=!item.isChecked
            }
        });
        this.setState({carts}, () => {
            this.updateTotal();
        });
    }
    // 全选状态改变
    onAllCheckStatus = (e) => {
        let allCheckStatus = e.target.checked;
        let carts = [...this.state.carts];
        carts.forEach(item => {
            item.isChecked = allCheckStatus;
        });
        this.setState({ carts, allCheckStatus }, () => {
            this.updateTotal();
        }); 
    }
    // 更新总价
    updateTotal = () => {
        let total = 0;
        this.state.carts.forEach(item => {
            if (item.isChecked) {
                total += item.price * item.count;
            }
        });
        this.setState({ total }, () => {
            this.updateAllCheckStatus();
        });
    }
    updateAllCheckStatus = () => {
        let allCheckStatus = this.state.carts.every(item => item.isChecked);
        this.setState({ allCheckStatus });
    }
    render() {
        return (
            <div>
                <table border={1}>
                    <tr>
                        <td></td>
                        <td>商品名称</td>
                        <td>单价</td>
                        <td>数量</td>
                    </tr>
                    {this.state.carts.map(item => {
                        return (
                            <Prolist key={item.id} item={item} add={this.add} reduce={this.reduce} onCheckStatus={this.onCheckStatus} />
                        )
                    })}
                </table>
                <div className="allCheck">
                    {/* 需要根据我们定义的属性来判断是否是全选 */}
                    <input type="checkbox" checked={this.state.allCheckStatus ? 'checked' : ''} onChange={this.onAllCheckStatus} />全选
                    <h1 className="total">总计：￥{this.state.total}</h1>
                </div>
            </div>
        )
    }
}

Prolist.jsx组件

import React, { Component } from 'react'
export default class Prolist extends Component {
    state={
        num:1
    }
    // 点击加号按钮
    childAdd = () => {
        const {add,item} = this.props
        add(item.id)
    }
    // 点击减号按钮
    childReduce = () => {
        const {reduce,item} = this.props
        reduce(item.id)
    }

    handleChange=()=>{
        const {onCheckStatus,item} = this.props
        onCheckStatus(item.id)
    }
    render() {
        return (
            <tr key={this.props.item.id}>
                {/* 是否勾选 */}
                <td>
                    <input type="checkbox" checked={this.props.item.isChecked ? 'checked' : ''} onChange={this.handleChange} data-id={this.props.item.id} />
                    {/* 显示的名称 */}
                </td>
                <td><span>{this.props.item.name}</span></td>
                {/* 显示的价格 */}
                <td><span>￥{this.props.item.price}</span></td>
                <td>
                    {/* -按钮 */}
                    <button onClick={this.childReduce} data-id={this.props.item.id}>-</button>
                    {/* 显示数量 */}
                    <input type="text" value={this.props.item.count} disabled />
                    {/* +按钮 */}
                    <button onClick={this.childAdd} data-id={this.props.item.id}>+</button></td>
            </tr>
        )
    }
}