react 购物车

import React, { Component } from 'react'
import './App.css';
class GoodsItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      goodsInfo: this.props.goodsInfo,
      singleCheck: false
    }
  }
  render() {
    return (
      <li>
        {/** 单选按钮点击的时候需要传参到父组件 参数：id，price ，number**/}
        <input type="checkbox" checked={this.props.ischeckAll ? true : this.state.singleCheck} onChange={() => {
          this.singleChecked()
        }} />
        <img src={this.state.goodsInfo.pic} alt="" />

        <div>
          <div>{this.state.goodsInfo.name}</div>
          <div style={{ color: "red" }}>￥{this.state.goodsInfo.price}</div>
        </div>

        <div>
          <button onClick={this.changeNumberCount.bind(this, this.state.goodsInfo.number, -1)}
            disabled={this.state.goodsInfo.number === 1}>-</button>
          <span>{this.state.goodsInfo.number}</span>
          <button onClick={this.changeNumberCount.bind(this, this.state.goodsInfo.number, 1)}>+</button>
        </div>

        <div>
          <button onClick={() => { this.props.removeItem(this.state.goodsInfo) }}>删除</button>
        </div>
      </li>
    )
  }
  // 加减
  changeNumberCount(number, count) {

    this.setState({
      goodsInfo: { ...this.state.goodsInfo, number: number + count }
    }, () => {
      if (this.state.singleCheck) {
        this.props.countMoney(this.state.goodsInfo, this.state.singleCheck)
      }
    })
  }
  // 单选
  singleChecked() {
    this.setState({
      singleCheck: !this.state.singleCheck
    }, () => {
      if (this.props.ischeckAll) {
        this.props.changeCheckAll()
      }
      this.props.countMoney(this.state.goodsInfo, this.state.singleCheck)
    })
  }

}
export default class App extends Component {
  state = {
    ischeckAll: false,
    selected: [],
    totalPrice: 0,
    totalNumber: 0,
    datalist: [{
      name: "商品1",
      price: 10,
      number: 1,
      id: 1,
      limit: 5, //限购
      pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg",
      checked: false
    },
    {
      name: "商品2",
      price: 20,
      number: 2,
      id: 2,
      limit: 10, //限购
      pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg",
      checked: false
    },
    {
      name: "商品3",
      price: 30,
      number: 3,
      id: 3,
      limit: 15, //限购
      pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg",
      checked: false
    }
    ]
  }
  render() {
    return (
      <div>
        <input type="checkbox" checked={this.state.ischeckAll} onChange={
          () => this.allCheck()} />全选/全不选
        <ul>
          {this.state.datalist.map((item, index) =>
            <GoodsItem key={item.id}
              goodsInfo={item}
              ischeckAll={this.state.ischeckAll}
              changeCheckAll={() => {
                this.setState({
                  ischeckAll: !this.state.ischeckAll
                })
              }}
              countMoney={(goodsInfo, singleCheck) => { this.countMoney(goodsInfo, singleCheck) }}
              removeItem={(goodsInfo) => { this.removeItem(goodsInfo) }} />
          )}
        </ul>
        <div>总金额：{this.state.totalPrice} 总数量：{this.state.totalNumber}</div>
      </div>
    )
  }
  // 计算总金额，总数量(单条数据)
  countMoney(goodsInfo, singleCheck) {
    console.log(goodsInfo)
    // 更新商品列表(状态，数量)
    this.setState({
      datalist: this.state.datalist.map(item => {
        if (item.id === goodsInfo.id) {
          return { ...item, singleCheck, number: goodsInfo.number }
        }
        return item
      })
    }, () => {
      // 计算
      let total = 0
      let num = 0
      this.state.datalist.filter(item => item.singleCheck).forEach((item) => {
        console.log(item)
        total += item.number * item.price
        num += item.number
      })
      //更新页面金额，数量
      this.setState({
        totalPrice: total,
        totalNumber: num
      })
    })
  }

  removeItem(goodsInfo) { // 删除
    this.setState({
      datalist: this.state.datalist.filter(item => item.id !== goodsInfo.id)
    }, () => {
      this.countMoney(goodsInfo, false)
    })
  }

  allCheck() { // 全选
    this.setState({
      ischeckAll: !this.state.ischeckAll
    }, () => {
      let total = 0
      let num = 0
      this.state.datalist.forEach(item => {
        total += item.number * item.price
        num += item.number
      })
      //更新页面金额，数量
      this.setState({
        totalPrice: total,
        totalNumber: num
      })
    })
  }
}