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 ( <p className="shopCar"> <p className='header'> <Link to="/tab1">返回</Link> <h3>购物车</h3> </p> <p className='section'> <p className='list'> { this.state.arr.map((ele,index)=>{ return ( <p className='item' key={index}> <p className='radio'> <input type="checkbox" checked={ele.checked} onChange={ (e)=>{ this.getCheckedChange(e,index) } }/> </p> <p className='le'> <img src={ele.img} alt="" /> </p> <p className='center'> <h3>{ele.name}</h3> <p 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> </p> <p className="price"> <p>单价: {ele.new_price} 总价:{ele.new_price*ele.num}</p> </p> </p> <p className='ri'> <button onClick={(e)=>{ this.del(e,index) }}>删除</button> </p> </p> ) }) } </p> </p> <p 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> </p> </p> ); } //渲染页面 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 } }}