这是使用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>
);
}
}