###第一步 ：首先電腦上已經安裝react的腳手架
cnpm install create-react-app -g
###第二步 ：創建項目
creact-react-app 項目名（shopping）
###第三步：進入項目，看看項目是否可以正常運行
cd shopping ======> npm start 或 cnpm install yarn --save 后 yarn start
###第四步：創建兩個文件夾App和shop
將App.js和App.css移入到App文件夾中 ====》要在index.js中修改一下引入App.js的路徑
創建兩個文件sp.css和sp.js 移入到shop文件夾中
###第五步：在sp.js中寫入代碼
import React, {Component} from 'react'; //---->引入react模塊
import "./sp.css" //引入sp.css樣式
class Sp extends Component {
constructor(props) {
super(props);
this.state={//定義一個初始化狀態
good:[//將頁面的數據寫入good中用數組的方式保存
{img:"1.png",txt:"手工",jq:12,num:1,checked:false},//這里的圖片都是本地圖片，需要你本人自己替換，樣式里也有一張需要替換
{img:"2.png",txt:"桌",jq:20,num:1,checked:false},
{img:"3.png",txt:"椅",jq:32,num:1,checked:false},
{img:"1.png",txt:"板凳",jq:40,num:1,checked:false}
],
c:false //定義一個狀態，后面用來判斷 多選框
}
}
zj(){//--->總價
var list=this.state.good;//獲取list中的數據
var s=0;//聲明一個s變量用來保存總價
list.forEach((v,i)=>{//循環它里面的數據
if(v.checked){//判斷，當多選框被選中的時候
s+=(v.jq*v.num);//總價等於當前被選中的數據的單價*數量
}
});
return s
}
jj(n){//+加按鈕
var list=this.state.good;
list[n].num++;//n為當前的下標，點擊后，每次數量加1
this.setState({good:list})//在更新當前的狀態
}
jian(n){//-減按鈕
var list=this.state.good;
list[n].num--;//n為當前的下標，點擊后，每次減1
if(list[n].num<=0){判斷，當數量減到0的時候，彈出“最少買一個”，后面不在執行，最低的數量是1
alert("最少買一個");
list[n].num=1;
}
this.setState({good:list})//在更新當前的狀態
}
tg(n){//--->點擊切換按鈕 多選框 目前做了三種方法可以實現
var list=this.state.good;
list[n].checked=!list[n].checked;//取反值
// ===================================第一種方法
// var ler=list.filter((v,i)=>{//數組過濾的方法
// return v.checked//--->返回 該多選框為被選中
// });
// if(ler.length==list.length){//--->判斷選中的多選框的長度和數組中的數據長度是否相同
// this.setState({good:list,c:true})//--->如果是，把全選的屬性false更新為true
// }else{
// this.setState({good:list,c:false})//--->如果不是，全選屬性為false
// }
// ==============================================第二種方法
// var ler=list.every((v,i)=>{//--->every當多選框都被選中的時候，條件都滿足true
// return v.checked;//--->單個被選中返回false
// })
// // console.log(ler)
// this.setState({good:list,c:ler})//更新cc的狀態為ler,當ler為false時，cc就是false,反之亦然
// ====================================================第三種方法
var sun=0;//聲明一個sun ，用來保存數值
var ff=true;//聲明一個狀態 true false 判斷
list.forEach((v,i)=>{//循環加判斷
if(v.checked){//如果多選框被選中的時候，就讓sun加1
sun++
}
})
if(sun==list.length){//當sun被選中的數量等於它當前整體的長度的時候
ff=true;//輸出ff的狀態為true
}else{//反之
ff=false
}
this.setState({good:list,c:ff})//讓cc的狀態等於當前ff的狀態
}
qx(){//--->全選
var list=this.state.good;
var c=!this.state.c;//--->先改變當前的全選狀態為true
list.forEach((v,i)=>{//--->循環當前的list數組
v.checked=c;//--->把全選的狀態true賦值給good中的checked
});
this.setState({good:list,c})//更新狀態
}
js(){//--->結算
var list=this.state.good;
var a=list.filter((v,i)=>{//數組過濾的方法 滿足條件，輸出新的數組，把不滿足條件的過濾掉
return v.checked//當多選框被選中的時候
})
console.log(a)//在控制台輸出當前被選中的數據，價格，數量 等
}
render() {
return (
<div className="box">
<ul>
{
this.state.good.map((v,i)=>{//數組的map方法 修該數據后，返回一個行的新的數組
return <li key={i}>
{/*<span className={(v.checked?"active":"")+" d1"} onClick={this.tg.bind(this,i)}></span>*/}
<img src={v.checked?"/ab.png":"/aa.png"} alt="" onClick={this.tg.bind(this,i)}/>
<img src={v.img} alt=""/>
<div className="box1">
<p>{v.txt}</p>
<i>${v.jq}</i>
<input type="button" value="+" onClick={this.jj.bind(this,i)}/>
<input type="text" value={v.num} style={{width:"20px"}}/> {/*注：style后要加雙花括號{{}}*/}
<input type="button" value="-" onClick={this.jian.bind(this,i)}/>
</div>
</li>
})
}
</ul>
<div className="box2">
<span className={(this.state.c?"active":"")+" d1"} onClick={this.qx.bind(this)}><b>全選</b></span>
<span>合計${this.zj()}</span>
<input type="button" value="結算" onClick={this.js.bind(this)}/>
</div>
</div>
);
}
}
export default Sp;//導出
###在sp.css中寫樣式
.box ul{
list-style: none;
}
.box ul li{
width: 400px;
height: 150px;
line-height: 10px;
}
.box ul li:hover{
background: #ccc;
}
.box ul li>img{
margin: 10px 0;
width: 100px;
height: 100px;
float: left;
}
.d1{
float: left;
display: block;
width: 40px;
height: 40px;
border: 1px solid #000;
border-radius:50%;
}
.active{
background:url(/ab.png) no-repeat;
background-size:40px 40px;
}
.box1{
float: right;
}
###在App.js中寫入代碼
import React from 'react';//引入react模塊
import Sp from "../shop/sp"//引入sp.js文件
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Sp></Sp>{/* sp.js的組件*/}
</div>
);
}
}
export default App;//導出
###以上一個簡單的購物車已經完成了 ，歡迎聯系我，一起交流學習！！！