有人会说你这一步一步的功能少点，请耐心往后看功能得有串联性我们要一步一步来

购物车主要功能包含:{获取数据->渲染页面->点击增加/减少数量->单选按钮-->全选按钮-->页面跳转如(跳转到我的页面,购物车页面等等)

今天主要说下点击增加/减少和按钮吧

首先我们肯定是要获取数据的:

constructor(props)
{
super(props)
this.state={
    data:[]
}  
}
import axios from "axios";
componentDidMount(){      
axios.get("http://xxxx.xxxxx").then(res=>{
consoel.log(res)
this.setState({
    data:res.data
})
})
}
复制代码

在我们获取到数据之后我们要进行页面的渲染

<div>
{
this.state.data.map((item,index)=>{
return(
<div>
进行页面渲染......
</div>
)
})
}
</div>
复制代码

当我们基础渲染了之后就该进行功能的书写了.通常我们的数量在数据内名称为count 价格名称为price 我们也用这两个表达吧现在开始做点击增加数量和减少数量

<Button onClick={this.add.bind(this,index)>增加</Button>
<Button onClick={this.reduce.bind(this,index)>减少</Button>
这个Button是antd的样式使用时需要提前引入 之后页面也需要引入例如:import { Button } from "antd";
当我们点击增加的时候我们去调用add这个函数同理点击减少时调用reduce
点击时传过去的index是我们的下标
复制代码

我们先来写add的(增加的)

add(index){
//获取我们的index    
let data=this.state.data
定义data等于我们的总数据
data[index].count++
//自增1
this.setState({data:data})
赋值
简单来说就是 获取->增加->赋值 的操作
}
复制代码

减少其实和删除区别不大就是多了一层判断毕竟商品不能买0个

reduce(index){
//获取我们的index    
let data=this.state.data
定义data等于我们的总数据
if(data[i].count>1){
data[index].count--
}
//自增1
this.setState({data:data})
赋值
简单来说就是 获取->减少->赋值 的操作
}
复制代码

之后就是我们的单选框了也就是每个商品前面的input 我们每个的input需要绑定一下我们的checked属性

我们要在获取data时加上一步操作让他的每一项data都有一个checked为false(为了方便后续代码的操作)

componentDidMount(){      
axios.get("http://xxxx.xxxxx").then(res=>{
for(let i=0;i<res.data.length;i++){
res.data[i].checked=false
}
this.setState({
    data:res.data
})
})
}
复制代码

单input框操作

<input type="checkbox" onChange={this.dan.bind(this,index) checked={item.checked} />
一个checkbox类型的input    当改变时调用dan这个函数(最好别用onClick会报错) checked中的item是每一项this.state.data的选中状态

dan(i){
let data=this.state.data
//获取我们的总数据-->data
data[i].checked=!data[i].checked
//点击时true和false的切换
this.setState({data:data})
}
复制代码

之后是我们的全选框作用是：点击时全部选中

<input type="checkbox" onChange={this.quan.bind(this,index) checked={this.state.quan} />
我们需要在上边的state中设置一个quan为false
当我门点击时调用quan这个函数

quan(){
let data=this.state.data
let quan=this.state.quan
quan=!quan
for(let i=0;i<data.length;i++){
data[i].checked=quan    
}
this.setState({data:data})
}
复制代码

我们已经大体完成了

增加/减少数量

单选/全选的基础

接下来我们来做--->价格和当单选全部选中时全选自动选中和缺少任何一个或多个时全选自动不选中

再求总价时我们要先在state中定义一个sumprice=0是我们的初始总价

sumprice(){
let sum=0;
let data=this.state.data
for(let i=0;i<data.length;i++){
if(data[i].checked==true){
    sum+=data[i].price*data[i].count
}
}
this.setState({sumprice:sum})
}
复制代码

这个做好后我们要在增加...减少...单选...全选..删除后边都添加上this.sumprice() 我们每做到和价格或数量或选中有关时都获取到价格并且输出到页面上来

今天的最后一步

价格和当单选全部选中时全选自动选中和缺少任何一个或多个时全选自动不选中

我们只添加一个ever在dan这个函数里

dan(i){
let data=this.state.data
//获取我们的总数据-->data
data[i].checked=!data[i].checked
let every=data.every((item,index)=>{
    return item.checked==true;
})
//点击时true和false的切换
this.setState({data:data,quan:every})
}
复制代码

一起来看React(购物车)

有人会说你这一步一步的功能少点，请耐心往后看功能得有串联性我们要一步一步来

我们已经大体完成了

猜你喜欢

一起来看React(购物车)

有人会说你这一步一步的功能少点，请耐心往后看功能得有串联性 我们要一步一步来

我们已经大体完成了

猜你喜欢

有人会说你这一步一步的功能少点，请耐心往后看功能得有串联性我们要一步一步来