Some would say this step you less point-by-step function, the function must have the patience to look back to our series of step by step

Cart Main features include: {get data -> Render page -> Click to increase / decrease the number -> radio button -> Select All button -> page jump as (jump to my page, shopping cart page, etc. Wait)

Today, under the main say Click to increase / decrease and right buttons

First, we definitely have to get the data:

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
})
})
}
复制代码

After we get the data we want to render the page

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

When writing functions in respect of conduct after the foundation of our rendering. In general, our number of names in the data count for the price price name we use these two expressions do right now to increase the number of clicks and reduce the number of

<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是我们的下标
复制代码

Let's take a write add the (increased)

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

In fact, reduce and remove the difference is not more than one judge, after all, can not buy goods 0

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

After that we are a single box is in front of each commodity input each of us what we need to bind the input of checked properties

When we want to get data plus step of the operation of each of the data so that he has checked into a false (in order to facilitate the subsequent operation code)

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
})
})
}
复制代码

Single operation input block

<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})
}
复制代码

After our whole box role is: When you click Select All

<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})
}
复制代码

We have largely completed the

Increase / decrease the number

Radio base / select all of

Next we do ---> Select All to automatically select and price and the lack of any one or more radio Select When Select All is not selected automatically

When the total amount we must first define and then seek a state in sumprice = 0 is our initial total

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})
}
复制代码

After doing this we want to reduce the increase in ... ... the radio ... Select .. deleted are added back on this.sumprice () and each of us do to get the price or quantity are selected or when the relevant price and outputs up to page

Today's the last step

Price and Select is automatically selected when the radio is missing and all select any one or more of full-time option is not selected automatically

We only add a function in this ever in 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})
}
复制代码

With the view React (cart)

Some would say this step you less point-by-step function, the function must have the patience to look back to our series of step by step

We have largely completed the

Guess you like