2021-05-22

import React, { Component } from 'react'
import './css/goods.css'


export default class App extends Component {
  state = {
    ischeckAll: false,
    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) =>
            <li key={index} >
              <input type="checkbox" checked={item.checked} onChange={() => this.singleCheck(index)} />
              <img src={item.pic} alt="" />

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

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

              <div>
                <button onClick={this.removeItem.bind(this, index)}>删除</button>
              </div>
            </li>
          )}
        </ul>
        <div>总金额：{this.state.Totalprice} 总数量：{this.state.Totalnumber}</div>
      </div>
    )
  }
  changeNumberCount (index, count) { // 加减
    const newdatalist = [...this.state.datalist]
    newdatalist[index].number += count
    this.setState({
      datalist: newdatalist
    })
  }
  removeItem (index) { // 删除
    this.setState({
      datalist: this.state.datalist.filter((item, indey) => index !== indey)
    })
    this.getTotal()
  }
  getTotal () { // 总计
    let oldlist = [...this.state.datalist]
    let total = 0
    let num = 0
    let newlist = oldlist.filter((item) => item.checked === true) //  选中的
    newlist.map((item) => {
      total += item.number * item.price
      num += item.number
    })
    this.setState({
      Totalprice: total,
      Totalnumber: num
    })
  }
  singleCheck (index) { // 单选
    let newlist = [...this.state.datalist]
    newlist[index].checked = !newlist[index].checked
    let ischeckAll = this.state.ischeckAll
    ischeckAll = newlist.every((item) => item.checked)
    this.setState({
      datalist: newlist,
      ischeckAll: ischeckAll
    })
    this.getTotal()
  }
  allCheck () { // 全选
    let newlist = [...this.state.datalist]
    let ischeckAll = !this.state.ischeckAll
    newlist.map((item) => item.checked = ischeckAll)
    this.setState({
      datalist: newlist,
      ischeckAll: ischeckAll
    })
    this.getTotal()
  }

}

标签：index,22,05,datalist,newlist,item,state,2021,ischeckAll
来源： https://blog.csdn.net/great_t/article/details/117155040