用react写购物车

import React, { Component } from 'react'
import black from "../css/black.module.css"
export default class shoppingcar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            checkedall: false,
            theme: black,
            list: [{ id: 1, goodsname: "商品一", goodsprice: 1, goodsnum: 1, checked: false }, { id: 2, goodsname: "商品二", goodsprice: 2, goodsnum: 2, checked: false }, { id: 3, goodsname: "商品三", goodsprice: 3, goodsnum: 3, checked: false }],
            num: 0,
            price: 0
        }
    }

    calc = (id, n) => {
        this.setState({
            list: this.state.list.map(item => {
                if (item.id == id) {
                    item.goodsnum = item.goodsnum + n
                }
                return item
            })
        }, () => {
            this.total()
        })
    }
    //单个删除
    delitem = (id) => {
        this.setState({
            list: this.state.list.filter(item => item.id != id)
        }, () => {
            this.setState({
                checkedall: this.state.list.length && this.state.list.every(item => item.checked)
            })
            this.total()
        })
    }
    // 全选
    changeall = (e) => {
        this.setState({
            checkedall: e.target.checked
        }, () => {
            this.setState({
                list: this.state.list.map(item => {
                    item.checked = this.state.checkedall
                    return item
                })
            })
            this.total()
        })
        console.log(555)
    }
    //反选
    changeone = (id, e) => {
        this.setState({
            list: this.state.list.map(item => {
                if (item.id == id) {
                    item.checked = e.target.checked
                }
                return item
            })

        }, () => {
            this.setState({
                checkedall: this.state.list.length && this.state.list.every(item => item.checked)
            })
            this.total()
        })
    }
    //计算价格
    total = () => {

        let num = 0
        let price = 0
        let selectlist = this.state.list.filter(item => item.checked)
        if (selectlist.length) {
            num = selectlist.map(item => item.goodsnum).reduce((a, b) => a + b)
            price = selectlist.map(item => item.goodsnum * item.goodsprice).reduce((a, b) => a + b)
        }

        this.setState({
            num,
            price
        })
    }
    //批量删除
    delAll = () => {
        this.setState({
            list: this.state.list.filter(item => item.checked == false)
        }, () => {
            this.setState({
                checkedall: this.state.list.length && this.state.list.every(item => item.checked)
            })
            this.total()
        })
    }
    render() {
        return (
            <div>
                <div className={this.state.theme.table}>
                    {/* 头部 */}
                    <div className={this.state.theme.tr}>
                        <div className={this.state.theme.item}>
                            <input type="checkbox" checked={this.state.checkedall} onChange={(e) => {
                                this.changeall(e)
                            }}
                            />
                        </div>
                        <div className={this.state.theme.item}>
                            商品名称
                        </div>
                        <div className={this.state.theme.item}>
                            商品价格
                        </div>
                        <div className={this.state.theme.item}>
                            商品数量
                        </div>
                        <div className={this.state.theme.item}>
                            小计
                        </div>
                        <div className={this.state.theme.item}>
                            操作
                        </div>
                    </div>
                    {/* 用map循环列表 */}
                    {this.state.list.map(item => {
                        return (<div className={this.state.theme.tr} key={item.id}>
                            <div className={this.state.theme.item}>
                                <input type="checkbox" checked={item.checked} onChange={(e) => {
                                    this.changeone(item.id, e)
                                }} />
                            </div>
                            <div className={this.state.theme.item}>
                                {item.goodsname}
                            </div>
                            <div className={this.state.theme.item}>
                                {item.goodsprice}
                            </div>
                            <div className={this.state.theme.item}>

                                {item.goodsnum > 1 ? <button onClick={() => {
                                    this.calc(item.id, -1)
                                }}>-</button> : ""}
                                {item.goodsnum}
                                <button onClick={() => {
                                    this.calc(item.id, 1)
                                }}>+</button>
                            </div>
                            <div className={this.state.theme.item}>
                                {item.goodsnum * item.goodsprice}
                            </div>
                            <div className={this.state.theme.item} onClick={() => {
                                this.delitem(item.id)
                            }}>
                                删除
                            </div>
                        </div>)
                    })}
                    {/* 底部 */}
                    <div className="footer">
                        <div className={this.state.theme.item} onClick={() => {
                            this.delAll()
                        }}>批量删除</div>
                        <div className={this.state.theme.item}></div>
                        <div className={this.state.theme.item}></div>
                        <div className={this.state.theme.item}>{this.state.num}</div>
                        <div className={this.state.theme.item}>{this.state.price}</div>
                        <div className={this.state.theme.item}></div>
                    </div>

                </div>
            </div>
        )
    }
}