React实现简单购物车
程序员文章站
2024-03-20 13:17:40
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./build/react.js" type="text/javascript" charset="utf-8"></script>
<script src="./build/react-dom.js" type="text/javascript" charset="utf-8"></script>
<script src="./build/browser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="build/jquery.min.js" charset="UTF-8"></script>
<style type="text/css">
body,html{
background-color: whitesmoke;
}
.shopBox{
width: 425px;
height: 375px;
background-color: white;
margin: 0 auto;
position: relative;
}
.shopLine{
/*background-color: pink;*/
height: 70px;
padding: 15px;
position: relative;
box-shadow: 3px 3px 3px #dddddd;
margin-bottom: 3px;
}
.shopLine img{
float: left;
width: 70px;
height: 70px;
}
.inputBox{
float: left;
margin-top: 30px;
margin-right: 10px;
}
.shopDetails{
float: left;
margin-left: 20px;
}
.shopDetails span{
display: block;
margin-bottom: 5px;
}
.shopDetails span:nth-child(2){
color: gray;
font-size: 13px;
margin: 8px 0;
}
.shopDetails span:nth-child(3){
color: #e4393e;
font-size: 16px;
}
.shopCalc{
position: absolute;
bottom: 10px;
right: 20px;
border: 1px solid #9A9A9A;
line-height: 30px;
text-align: center;
border-radius: 5px;
}
.calcDown,.calcUp{
display: inline-block;
width: 30px;
height: 30px;
cursor: pointer;
}
.calcNum{
width: 28px;
height: 28px;
border: none;
text-align: center;
border-left: 1px solid #9A9A9A;
border-right: 1px solid #9A9A9A;
outline: none;
}
.shopCart{
position: absolute;
width: 100%;
height: 70px;
background-color: pink;
bottom: 0;
left: 0;
}
.shopCon{
position: relative;
padding: 0 15px;
}
.totalPrices{
float: left;
margin-left: 50px;
line-height: 80px;
}
</style>
</head>
<body>
<div id="app"></div>
</div>
</body>
<script type="text/babel">
var app=document.getElementById("app");
var App=React.createClass({
render(){
return(
<div className="shopBox">
{
this.state.list.map(function(item,index){
{/*React 中（this.state.list.map）专门用来遍历多条数据的 item代表当前的元素 index代表当前的下标 */}
return(
<div className="shopLine">
<div className="inputBox">
<input onChange={()=>{this.single(index)}} type="checkbox" checked={this.state.list[index].goodsStatus}/>
</div>
<img src={item.thumbnail} />
<div className="shopDetails">
<span>{item.name}</span>
<span>规格:{item.stock}克</span>
<span>¥{item.reduct_price}</span>
</div>
<div className="shopCalc">
<span onClick={()=>{this.calcDown(index)}} className="calcDown">-</span>
<input onChange={this.textValue.bind(this,index)} className="calcNum" value={item.count}/>
<span onClick={()=>{this.calcAdd(index)}} className="calcUp">+</span>
</div>
</div>
)
}.bind(this))
}
<div className="shopCart">
<div className="shopCon">
<div className="inputBox">
<input onChange={this.allState_} type="checkbox" checked={this.state.checkState}/>全选
</div>
<div className="totalPrices">
总价:¥ {this.state.totalPrice}
</div>
</div>
</div>
</div>
)
},
//全选状态
allState_:function(){
//每次点击全选框的状态改为上一次的反选
var checkState=!this.state.checkState;
var list=this.state.list;//获得数据
for(var i=0;i<list.length;i++){//循环遍历商品勾选状态值
list[i].goodsStatus=checkState;
}
//更新state属性值
this.setState({
checkState:checkState,
list:list
})
//只要勾选状态发生改变或者数量发生改变都重新计算价格总额
this.totalPrice_();
},
//单个复选框点击
single:function(index){
//每次点击全选框的状态改为上一次的反选
var goodsStatus_=!this.state.list[index].goodsStatus;
var list=this.state.list;
list[index].goodsStatus=goodsStatus_;//改变单个复选框状态
console.log(list);
var checkState=true;//全选框状态
for(var i=0;i<list.length;i++){
if(!list[i].goodsStatus){//如果有单个复选框未选中 全选框的值则为false
checkState=false;
break;
}
}
//更新state属性值
this.setState({
list:list,
checkState:checkState
})
//只要勾选状态发生改变或者数量发生改变都重新计算价格总额
this.totalPrice_();
},
//按钮数量减
calcDown:function(index){
var list=this.state.list;
list[index].count-=1;
//判断数量不能小于1
list[index].count=list[index].count<1?1:list[index].count;
//更新state属性值
this.setState({
list:list
})
//只要勾选状态发生改变或者数量发生改变都重新计算价格总额
this.totalPrice_();
},
//按钮数量加
calcAdd:function(index){
var list=this.state.list;
list[index].count+=1;
//更新state属性值
this.setState({
list:list
})
//只要勾选状态发生改变或者数量发生改变都重新计算价格总额
this.totalPrice_();
},
//手动输入文本值
textValue:function(index,event){
var list=this.state.list;
var count=event.target.value;//手动输入的值
if(count==""){
alert("数量不能为空");
}
list[index].count=count;
//更新state属性值
this.setState({
list:list
})
//只要勾选状态发生改变或者数量发生改变都重新计算价格总额
this.totalPrice_();
},
//计算总价格
totalPrice_:function(){
var totalPrice=0;//初始化总金额
var list=this.state.list;
for(var i=0;i<list.length;i++){//循环计算单个商品勾选状态为true时进行相加计算
if(list[i].goodsStatus){
//单个商品价格总额为 商品价格*商品数量
totalPrice+=parseInt(list[i].reduct_price)*parseInt(list[i].count);
}
}
//更新总价格值
this.setState({
totalPrice:totalPrice
})
},
//初始化
getInitialState:function(){
return{
totalPrice:0,//初始化总金额
checkState:false,//初始化商品勾选的状态
list:[]
}
},
//dom渲染完毕之后调用
componentDidMount:function(){
var _this=this;
$.ajax({
type:'Get',
url:'./json_.json',
async:true,
success:function(res){
//往数据对象里动态添加 商品勾选状态属性，属性值和商品数量属性，属性值
var goodsStatus="goodsStatus";
var goodsStatus_="false";
var count="count";
var count_=1;
for(var i=0;i<res.length;i++){
eval("res[i]."+goodsStatus+"="+goodsStatus_);
eval('('+"res[i]."+goodsStatus+"="+goodsStatus_+')');
eval("res[i]."+count+"="+count_);
eval('('+"res[i]."+count+"="+count_+')');
}
_this.setState({
list:res
})
}
})
}
})
ReactDOM.render(<App/>,app);
</script>
</html>
json数据代码
json_.json
