15React购物车的事件

给每一个行都绑定好事件

加法  减法  删除  全选  反选  统计

下面是对减法的说明  文字描述中 加法有误  应该为减法

 

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>
        )
    }
}