###第一步 ：首先电脑上已经安装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)}/>
{/*注：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.js的组件*/}
</div>
);
}
}
export default App;//导出
###以上一个简单的购物车已经完成了 ，欢迎联系我，一起交流学习！！！
网友评论