React购物车组件代码

这是使用react框架项目做得购物车
此购物车的实现是es5，6中新增的数组方法，使用的是create-react-app 项目模版，还有蚂蚁金服的antd框架中的字体图标

import React, { Component } from 'react';

import {Tabs} from './Tabs'

import 'whatwg-fetch'

import '../assets/css/Tab3.css'
import {Link} from 'react-router-dom'


export class Tab3 extends Component {
    constructor(props){
        super(props)
        this.state = {
            arr:[],
            totalPrice:0
        }
    }
    //获取输入框的值
    handInputChange=(e,i)=>{
        console.log(e.target.value)
        //文本框的值 e.target.value 需要赋值给 json 数据的下标为index
        this.setState({
            arr:this.state.arr.map((ele,index)=>{
                if(index==i){
                    ele.num=e.target.value
                    return ele
                }else {
                    return ele
                }
            })
        })
        this.SumPrice()
    }
    //add 加
    add=(e,i)=>{
        console.log(e.target.value)
        //文本框的值 e.target.value 需要赋值给 json 数据的下标为index
        this.setState({
            arr:this.state.arr.map((ele,index)=>{
                if(index==i){
                    ele.num=ele.num*1+1
                    return ele
                }else {
                    return ele
                }
            })
        })
        this.SumPrice()

    }
    //减
    jian=(e,i)=> {
        // console.log(e.target.value)
        //文本框的值 e.target.value 需要赋值给 json 数据的下标为index
        this.setState({
            arr: this.state.arr.map((ele, index) => {
                if (index == i) {
                    if(ele.num==0){
                        ele.num = 1
                        return ele

                    }else{
                        ele.num = ele.num*1-1
                        return ele

                    }

                } else {
                    return ele
                }
            })
        })
        this.SumPrice()
    }
    //删除
    del=(e,i)=>{
        this.setState({
            arr:this.state.arr.filter((ele,index)=>{
                if(index !=i ){
                    return true
                }
            })
        })
    }
    //获取单选框的值
    getCheckedChange=(e,i)=>{
        //console.log(e.target.checked)
        //文本框的值 e.target.value 需要赋值给 json 数据的下标为index
        this.setState({
            arr:this.state.arr.map((ele,index)=>{
                if(index==i){
                    ele.checked=e.target.checked
                    return ele
                }else {
                    return ele
                }
            })
        })
        this.SumPrice()
    }
    //点击全选和全不选
    CheckedChange=(e)=>{
        if(e.target.checked==true){
            this.setState({
                arr:this.state.arr.map((ele,index)=>{
                    ele.checked=true
                    return ele
                })
            })

        }else if(e.target.checked==false){
            this.setState({
                arr:this.state.arr.map((ele,index)=>{
                    ele.checked=false
                    return ele
                })
            })
        }
        this.SumPrice()
    }
    //计算总价
    SumPrice=()=>{
        var sum=0
        this.state.arr.forEach((ele,index)=>{
            sum+=ele.num*ele.new_price
        })
        this.setState({
            totalPrice:sum
        })
    }
    render() {
        // console.log(this.state.arr)
        return (
          <div className="shopCar">

            <div className='header'>

                <Link to="/tab1">返回</Link>
                <h3>购物车</h3>

            </div>

            <div className='section'>
                <div className='list'>
                    {
                        this.state.arr.map((ele,index)=>{
                            return (
                                <div className='item' key={index}>

                                            <div className='radio'>
                                                <input type="checkbox" checked={ele.checked} onChange={
                                                    (e)=>{
                                                        this.getCheckedChange(e,index)
                                                    }
                                                }/>
                                            </div>

                                            <div className='le'>
                                                <img src={ele.img} alt="" />
                                            </div>

                                            <div className='center'>
                                                <h3>{ele.name}</h3>
                                                <div className='num'>
                                                    <button onClick={(e)=>{
                                                        // console.log(e,index)
                                                        this.jian(e,index)
                                                    }}>-</button>
                                                    {/*获取文本框的值*/}
                                                    <input type="text" value={ele.num} onChange={(e)=>{
                                                        // console.log(e,index)
                                                        this.handInputChange(e,index)
                                                    }}/>
                                                    <button onClick={(e)=>{
                                                        // console.log(e,index)
                                                        this.add(e,index)
                                                    }}>+</button>
                                                </div>

                                                <div className="price">
                                                    <p>单价: {ele.new_price} 总价:{ele.new_price*ele.num}</p>
                                                </div>

                                            </div>
                                            <div className='ri'>
                                                <button onClick={(e)=>{
                                                    this.del(e,index)
                                                }}>删除</button>
                                            </div>
                                        </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className="footer">
                            全选: <input type="checkbox" ref="quanxuan" onChange={
                (e)=>{
                    this.CheckedChange(e)
                }
                             }/>
                            合计: {this.state.totalPrice}
                            <button onClick={
                                (e)=>{
                                  this.props.history.push('/sub')
                                    //使用数组的过滤方法来选择更新之后的值
                                    var newArr=this.state.arr.filter((ele,index)=>{
                                        if(ele.checked==true){
                                            return true
                                        }else {
                                            return false
                                        }
                                    })
                                    //使用浏览器缓存来传递数据,因为h5
                                    window.localStorage.setItem("shuju",JSON.stringify(newArr))
                                }
                            }>结算</button>
                    </div>

          </div>
        );
    }
    //渲染页面
    componentDidMount(){
        var url = './shopping.json'

            fetch(url)
            .then((res)=>{return res.json()})
            .then((res)=>{
                this.setState({
                    arr:res
                })
            })
      }
    //页面更新
    componentDidUpdate(){
        // console.log("更新了")
        var bool=this.state.arr.every((ele,index)=>{
            if(ele.checked==true){
                return true
            }else {
                return false
            }
        })
        // console.log(bool)
        if(bool==true){
            this.refs.quanxuan.checked=true
        }else {
            this.refs.quanxuan.checked=false
        }
    }



}

上面的购物车在总价计算处有bug，一下是经过修改版的
修改版

import React, { Component } from 'react';
import "whatwg-fetch"
import '../../../assets/css/gwc/gwc.css'
export class Tab3 extends Component {
    constructor(props){
        super(props)
        this.state={
            arr:[],
            sum_price:0
        }
        console.log(props)
    }
    //获取数据
    componentWillMount(){
        var url="./js/shopping.json"
        fetch(url).then((res)=>{
            return res.json()
        }).then((res)=>{
            this.setState({
                arr:res
            })
        })
    }
    //获取输入框的值
    getInputText=(e,i)=>{
        this.setState({
            arr:this.state.arr.map((ele,index)=>{
                if(index===i){
                    ele.num=e.target.value
                    return ele
                }else {
                    return ele
                }
            })
        })
        this.SumPrice()
    }
    //jia
    augment=(e,i)=>{
        this.setState({
            arr:this.state.arr.map((ele,index)=>{
                if(index===i){
                    ele.num=ele.num*1+1
                    return ele
                }else {
                    return ele
                }
            })
        })
        this.SumPrice()
     }
    //jian
    reduce=(e,i)=> {
        this.setState({
            arr:this.state.arr.map((ele,index)=>{
                if(index==i){
                    ele.num=ele.num*1-1
                    return ele
                }else {
                    return ele
                }
            })
        })
        this.SumPrice()
    }

    //删除
    del=(e,i)=> {
        this.setState({
            arr:this.state.arr.filter((ele,index)=>{
                if(index!==i){
                    return true
                }else {
                    return false
                }
            })
        })
        setTimeout(()=>{
            this.SumPrice()
        },1)
    }

    // 实现全选与反选的操作
    CheckAllorNoAll=(e,i)=>{
        this.setState({
            arr:this.state.arr.map((ele,index)=>{
                if(index===i){
                    ele.checked=!ele.checked
                }
                return ele
            })
        })
        var flag=this.state.arr.every((ele,index)=>{
            if(ele.checked===false){
                return false
            }else {
                return true
            }
        })
        if(flag===true){
            this.refs.checkALL.checked=true
        }else {
            this.refs.checkALL.checked=false
        }
        this.SumPrice()
    }
    //全选全不选,判断全选状态
    CheckedAll=(e)=>{
        if(e.target.checked==true){
            this.setState({
                arr:this.state.arr.map((ele,index)=>{
                    ele.checked=true
                    return ele
                })
            })
        }else  if(e.target.checked==false){
            this.setState({
                arr:this.state.arr.map((ele,index)=>{
                    ele.checked=false
                    return ele
                })
            })
        }
        this.SumPrice()

    }
    //计算总合计
    SumPrice=()=>{
        var sum=0
        this.state.arr.forEach((ele,index)=>{
            if(ele.checked===true){
             sum+=ele.num*ele.new_price
            }
        })
        this.setState({
            sum_price:sum
        })
    }
    //结算传值
    SettleAccounts=()=>{
        var shopping=[]
        this.state.arr.forEach((ele,index)=>{
            if(ele.checked===true){
                shopping.push(ele)
            }
        })
        console.log(shopping)
        window.localStorage.setItem("shopping",JSON.stringify(shopping))
        window.localStorage.setItem("sumprice",JSON.stringify(this.state.sum_price))
        this.props.history.push('/tab4')
    }
    render() {
        return (
            <div className="App">
                <div className="G_header">
                    <h1>购物车</h1>
                </div>
                <div className='section'>
                    {
                        this.state.arr.map((ele,index)=>{
                            return(
                                <div className="G_list" key={index}>
                                    <div className="G_Checked">
                                        <input type="checkbox" checked={ele.checked} onChange={
                                            (e)=>{
                                                this.CheckAllorNoAll(e,index)
                                            }
                                        }/>
                                    </div>
                                    <div className="G_img">
                                        <img src={ele.img} alt=""/>
                                    </div>
                                    <div className="G_Content">
                                        <div className="G_selected">
                                            <button onClick={
                                                (e)=>{
                                                    this.augment(e,index)
                                                }
                                            }>+</button>
                                            <input type="text" ref="nums" value={ele.num} onChange={
                                                (e)=>{
                                                  this.getInputText(e,index)
                                                }
                                            }/>
                                            <button onClick={
                                                (e)=>{
                                                    this.reduce(e,index)
                                                }
                                            }>-</button>
                                        </div>
                                        <div className="G_text">
                                            <p>{ele.name}</p>
                                            <p>
                                                单价：<span>{ele.new_price}</span>
                                                小计：<span>{ele.num*ele.new_price}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div className="G_del">
                                        <button onClick={
                                            (e)=>{
                                                this.del(e,index)
                                            }
                                        }>删除</button>
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>
                <div className="G_footer">
                    <div className="G_Checkbox">
                        <input type="checkbox" ref="checkALL" onChange={
                            (e)=>{
                                this.CheckedAll(e)
                            }
                        }/>全选
                    </div>
                    <div className="G_Price">
                        合计：{this.state.sum_price}
                    </div>
                    <div className="G_Button">
                        <button onClick={()=>{
                            this.SettleAccounts()
                        }}>结算</button>
                    </div>
                </div>
            </div>
        );
    }
}