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
})
})
}
}
06-01
444
07-23
07-23
07-23