给每一个行都绑定好事件
加法 减法 删除 全选 反选 统计
下面是对减法的说明 文字描述中 加法有误 应该为减法
2加法
3:删除的说明
4:单选按钮的说明
5:全选按钮的说明
6:统计的说明
完整代码如此 上图有一个错误地方 num应该为allNum
import React, { Component } from 'react'
import "./shoppingcar.css"
export default class Shoppingcar extends Component {
constructor(props){
super(props);
this.state={
list:[
{id:1,goodsname:"商品一",goodsnum:100,goodsprice:2,checked:false},
{id:2,goodsname:"商品二",goodsnum:200,goodsprice:10,checked:false},
{id:3,goodsname:"商品三",goodsnum:1,goodsprice:5,checked:false}
],
checkedCount:0,
total:0,
allNum:0
}
this.reduce = this.reduce.bind(this);
}
reduce(id,e){//减号事件
debugger;
this.setState({
list:this.state.list.map(item=>{
if(item.id == id){
if(item.goodsnum>1){//大于1才做减法
item.goodsnum -=1
if(item.goodsnum==1){
//e.target.innerHTML = " ";
}
}
}
return item;
})
})
this.getTotal();
}
add=(id)=>{//箭头函数的写法 加号事件
this.setState({
list:this.state.list.map(item=>{
if(item.id == id){
item.goodsnum +=1
}
return item;
})
})
this.getTotal();
}
delById=(id)=>{//删除
this.setState({
list:this.state.list.filter(item=>item.id!=id)
})
this.getTotal();
}
CheckOne=(id,e)=>{
if(e.target.checked){
this.state.count++;
}else{
this.state.count--;
}
if(this.state.count == this.state.list.length){
this.refs.checkAll.checked=true;
}else{
this.refs.checkAll.checked=false;
}
this.setState({
list:this.state.list.map(item=>{
if(item.id==id){
item.checked = e.target.checked
}
return item;
})
})
this.getTotal();
}
checkedAll=(e)=>{//全选
var flag = e.target.checked;
if(flag){//表示选中
this.state.count = this.state.list.length;
this.setState({
list:this.state.list.map(item=>{item.checked=true;return item})
})
}else{//表示没有选中
this.state.count = 0;
this.setState({
list:this.state.list.map(item=>{item.checked=false;return item})
})
}
this.getTotal();
}
getTotal=()=>{
//选中选中的对象 filter返回的是一个集合
var allNum=0;
var allPrice=0;
this.state.list.filter(item=>item.checked).forEach(item=>{
allNum += item.goodsnum;
allPrice += (item.goodsnum*item.goodsprice)
})
this.setState({
allNum:allNum,
total:allPrice
})
}
render() {
var trList = this.state.list.map(item=>
<ul className="tr" key={item.id}>
<li>
<input type="checkbox" checked={item.checked} onChange={(e)=>{
this.CheckOne(item.id,e)
}}/>
</li>
<li>{item.goodsname}</li>
<li>{item.goodsprice}</li>
<li>
<button onClick={this.reduce.bind(this,item.id)} >
{item.goodsnum>1?"-":""}
</button>
<input value={item.goodsnum} onChange={()=>{}}/>
<button onClick = {()=>{
this.add(item.id)
}}>+</button>
</li>
<li>{(item.goodsprice* item.goodsnum).toFixed(2)}</li>
<li onClick={()=>{
this.delById(item.id)
}}>删除</li>
</ul>
)
return (
<div className="shoppingcar">
<ul className="tr">
<li>
<input type="checkbox" ref="checkAll" onChange={(e)=>{
this.checkedAll(e);
}}/> 全选
</li>
<li>商品名称</li>
<li>商品价格</li>
<li>商品数量</li>
<li>商品小计</li>
<li>操作</li>
</ul>
{trList}
<ul className="tr">
<li>总数为:{this.state.allNum}</li>
<li>金额为:{this.state.total}</li>
<li></li><li></li> <li></li> <li></li>
</ul>
</div>
)
}
}