react-购物车

//app.js
import React, { Component } from 'react'
import List from './List'
import Total from './Total'
export default class App extends Component {
    constructor() {
        super()
        this.state = {
            checkAll: false,
            num: 0,
            price: 0,
            list: [
                {
                    title: "香蕉",
                    count: 1,
                    price: 1.5,
                    isChecked: false
                },
                {
                    title: "榴莲",
                    count: 2,
                    price: 100,
                    isChecked: false
                },
                {
                    title: "苹果",
                    count: 1,
                    price: 2.5,
                    isChecked: false
                }
            ]
        }
    }
    changeAll (bool) {
        this.setState({
            checkAll: bool
        })
        // 该数组内每个的isChecked
        let list = this.state.list
        list.forEach(item => {
            item.isChecked = bool
        })
        this.setState({
            list
        })
    }
    // －
    decrement (i) {
        let list = this.state.list
        if (list[i].count === 1) {
            return
        }
        list[i].count--
        this.setState({
            list
        })
    }
    // + 
    increment (i) {
        let list = this.state.list
        list[i].count++
        this.setState({
            list
        })
    }
    changeOne (i) {
        let list = this.state.list
        list[i].isChecked = !list[i].isChecked
        let bool = list.every(item => {
            return item.isChecked
        })
        this.setState({
            list,
            checkAll: bool
        })
    }
    getN () {
        let arr = this.state.list.filter(item => {
            return item.isChecked
        })
        return arr.length

    }
    getPrice () {
        let sum = 0;
        this.state.list.forEach(item => {
            if (item.isChecked) {
                sum += item.count * item.price
            }
        })
        return sum
    }
    render () {
        let { list, checkAll, num } = this.state
        return (
            <div>
                <h1>购物车</h1>
                <List
                    list={list}
                    checkAll={checkAll}
                    changeAll={this.changeAll.bind(this)}
                    changeOne={this.changeOne.bind(this)}
                    decrement={this.decrement.bind(this)}
                    increment={this.increment.bind(this)}
                />
                <Total num={this.getN()} price={this.getPrice()} />
            </div>
        )
    }
}
//index
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
    <App />,
    document.getElementById('root')
);
//list
import React, { Component } from 'react'
import "./List.css"
export default class List extends Component {
    changeAll (e) {
        // 触发全选的切换
        // 1. 能切换，改的是appjs里面的checkAll
        // 2. 下面3个都要跟着变，改的是appjs的数组
        this.props.changeAll(e.target.checked)
    }
    changeOne (i) {
        // 触发单选的切换
        // 该appjs里的list某一项的isChecked
        this.props.changeOne(i)
    }
    decrement (i) {
        this.props.decrement(i)
    }
    increment (i) {
        this.props.increment(i)
    }
    render () {
        let { list, checkAll } = this.props
        return (
            <div>
                <table border="1">
                    <thead>
                        <tr>
                            <th>
                                全选
                                <input type="checkbox" checked={checkAll} onChange={this.changeAll.bind(this)} />
                            </th>
                            <th>
                                商品
                            </th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>小计</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            list.map((item, index) => {
                                return (
                                    <tr key={index}>
                                        <td>
                                            <input type="checkbox"
                                                checked={item.isChecked}
                                                onChange={this.changeOne.bind(this, index)}
                                            />
                                        </td>
                                        <td>{item.title}</td>
                                        <td>{item.price}</td>
                                        <td>
                                            <button onClick={this.decrement.bind(this, index)}>-</button>
                                            <span>{item.count}</span>
                                            <button onClick={this.increment.bind(this, index)}>+</button>
                                        </td>
                                        <td>{item.count * item.price}</td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
    }
}
//total
import React, { Component } from 'react'

export default class Total extends Component {
    render () {
        return (
            <div>
                {/* n 取决于每个ischecked为true */}
                <h2>共选中{this.props.num}件商品</h2>
                <h2>总价为：{this.props.price}元</h2>
            </div>
        )
    }
}