いくつかは、このステップあなた少ないポイント・バイ・ステップの機能を言うだろう、この関数はステップごとの私達のシリーズに振り返るために忍耐を持っている必要があります

カート主な機能は次のとおりです。{データを取得する - ページレンダリング> - > /増やすためにクリック数減少 - すべてのボタンを選択> - - >ラジオボタンを>など、私のページに（ジャンプ、ショッピングカートページ、などのページジャンプなど）

今日では、メインと言う下/減少ボタンと右ボタンを高めるためにクリック

まず、我々は間違いなく、データを取得する必要があります。

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

私たちのレンダリングの基礎の後行為の点で関数を記述。一般的には、価格の価格名のデータ数の名前の私たちの数は、我々はこれらの2つの式を使用するとクリック数を増やすとの数を減らすために今やります

<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(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})
赋值
简单来说就是 获取->减少->赋值 的操作
}
复制代码

その後、我々は、単一のボックスは、各商品の入力の前に、我々は確認プロパティの入力をバインドするために必要なもの、私たちのそれぞれであります

我々は、彼が（その後の動作コードを容易にするために）虚偽にチェックインしているように、データとデータの各操作の手順を取得したいとき

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

私たちは、大部分が完了しました

数を減少/増加

無線基地/のすべてを選択します

次は--->自動的に選択するために、すべてを選択してくださいし、[すべて選択]が自動的に選択されていない場合の価格と任意の1つ以上の無線の欠如は、選択します

私たちが最初に定義してから、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に再度追加されている）と私たちのそれぞれは、価格や数量を得るために行う選択した場合、または関連する価格されています出力ページまで

今日の最後のステップ

ラジオが欠落していると、すべてのフルタイムのオプションのいずれか1つ以上を選択するが自動的に選択されていない場合の価格と選択が自動的に選択され

私たちはダンに今までにこの関数を追加します

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

ビューと反応（カート）

いくつかは、このステップあなた少ないポイント・バイ・ステップの機能を言うだろう、この関数はステップごとの私達のシリーズに振り返るために忍耐を持っている必要があります

私たちは、大部分が完了しました

おすすめ