import React from 'react'
import { Component } from 'react'
import "./cart.css"
// 纯显示的组件
function Cart({ carts }) {
    return (
        <div>
            <table>
                <tbody>
                    {
                        carts.map(cart => {
                            return (
                                <tr key={cart.id}>
                                    <td>{cart.name}</td>
                                    <td>{cart.price}</td>
                                    <td>{cart.count}</td>
                                    <td>{cart.count * cart.price}</td>
                                </tr>
                            );
                        })
                    }
                </tbody>

            </table>
        </div>

    );
}

// 购物车数据的设计
// {
//         name: "java",
//         price: 100,
//         count: 2
// }

// 类的组件写法，都是jsx
export default class hello extends Component {
    constructor(props) {
        super(props);
        this.state = {
            val: "",
            goods: [
                {
                    title: "java",
                    price: 1000
                },
                {
                    title: "php",
                    price: 500
                }, {
                    title: "python",
                    price: 800
                }
            ],
            carts: [
                {
                    id: 1,
                    name: "java",
                    price: 100,
                    count: 2
                }
            ]

        }
    }

    changeVal(ev) {
        this.setState({
            ...this.state,
            val: ev.target.value
        });
    }

    addGood(name) {
        var good = {
            title: name,
            price: 666
        }
        this.setState({
            val: "",
            goods: [
                ...this.state.goods,
                good
            ]
        });
    }
    addToCart(good) {
        console.log(good);

        let index = this.state.carts.findIndex(item => item.name == good.title);
        if (index !== -1) {
            // 修改操作
            let cart = this.state.carts[index];
            cart.count++;
            cart.name = good.title
            this.state.carts.splice(index, 1);

            // 若找到的话就修改操作
            this.setState({
                carts: [
                    ...this.state.carts,
                    cart
                ]
            });
        } else {
            //找不到添加操作
            var cart = {
                ...good,
                count: 1,
                id: this.state.carts.length + 1,
                name: good.title
            }
            // 添加操作
            this.setState({
                carts: [
                    ...this.state.carts,
                    cart
                ]
            });

        }
    }

    render() {
        return (
            <div>
                <input type='text' value={this.state.val} onChange={(event) => this.changeVal(event)}></input>
                <button onClick={(ev) => this.addGood(this.state.val)}>submit</button>
                <ul>
                    {/* jsx 可以嵌套jsx  */
                        this.state.goods.map(item => {
                            return (<li key={item.title}>{item.title}
                                <button onClick={(ev) => this.addToCart(item)}>添加</button>
                            </li>)
                        })
                    }
                </ul>

                {this.state.carts.length > 0 && <Cart carts={this.state.carts}></Cart>}
            </div>
        )
    }
}

我的设想就是购物车展示就是纯展示

而购物车数据，和商品数组都在父级中，这个和vue 差别有点大

数组中找元素，找到就返回对应的下标，找不多就返回-1

没有啥可说的，就是商品列表中，点添加到购物车，就添加进去了！

我记得我vue 也写过这个逻辑，所以业务逻辑一样的，只是写法不同！

结果展示

我发现展示结果不太对，于是我修改了下代码

这回展示结果如下：