React用数据驱动实现购物车
页面效果
var app = document.getElementById('app');
var App = React.createClass({
render:function () {
return(
<div className="wrap">
{/*商品*/}
{
this.state.cart.map((item,index)=> {
return(
<div className="commodity clearfix" key={index}>
<div className="checkBox fl">
<input className="check" type="checkbox" checked={this.state.cart[index].isChecked} onChange={()=>{this.checkOne(index)}}/>
</div>
<div className="pic fl">
<img src={this.state.cart[index].thumbnail} alt="#"/>
</div>
<div className="txt fl">
<h3>{this.state.cart[index].name}</h3>
<p>剩余库存:{this.state.cart[index].stock}</p>
<p>¥<span>{this.state.cart[index].reduct_price}</span></p>
</div>
<div className="num">
<button onClick={()=>{this.calcDown(index)}}>-</button>
<input ref="refNum" type="text" value={this.state.cart[index].num} onChange={this.changeNum.bind(this,index)}/>
<button onClick={()=>{this.calcUp(index)}}>+</button>
</div>
</div>
)
})
}
{/*底部*/}
<div className="footer clearfix">
<div className="allCheckBox fl">
<input className="allCheck" type="checkbox" checked={this.state.allChecked} onChange={this.allCheckf}/>
<span>全选</span>
</div>
{/*结算*/}
<a className="btn fr" href="#">去结算(<span>{this.state.amount}</span>件)</a>
{/*合计*/}
<div className="agg fl">
<div className="allPrice">
总计:<span id="price">{this.state.totalPrices}</span>
</div>
{/*优惠 discounts*/}
<div className="discounts">
不含运费,已优惠 <span>¥{this.state.discounts}</span>
</div>
</div>
</div>
</div>
)
},
方法
componentDidMount:function () {
var that = this;
$.ajax({
type:'get',
url:'./json.json',
async:true,
success:function (res) {
if(res.success && res.code == 200){
// console.log(res);
var cart = res.list;
for(var i=0;i<cart.length;i++){
cart[i].isChecked = false;
}
that.setState({
cart:cart
})
}
}
})
},
getInitialState:function () {
return{
totalPrices:0,//代表总价
amount:0,//代表选中的商品数量
discounts:'0.00',//已优惠多少
allChecked:false,//代表全选按钮的值
cart:[]
}
},
checkOne:function (index) {
var cart = this.state.cart;
cart[index].isChecked = !cart[index].isChecked;
// 判断全部商品是否被勾选上
var allChecked = true;
for(var i=0;i<cart.length;i++){
// 只要有一个没选中就为false
if(!cart[i].isChecked){
allChecked = false;
break;
}
}
this.setState({
cart:cart,
allChecked:allChecked
});
// 调用计算总价
this.calcAll();
},
allCheckf:function (event) {
var allChecked = !this.state.allChecked;
var cart = this.state.cart;
for(var i=0;i<cart.length;i++){
cart[i].isChecked = allChecked;
}
this.setState({
allChecked:allChecked,
cart:cart
});
// 调用计算总价
this.calcAll();
},
changeNum:function (index,event) {
// 这个代表手动输入的值
// console.log(index);
// console.log(event);
// 商品数量框输入验证
if(!isNaN(Number(event.target.value))){
num = event.target.value.trim();
// console.log(event.target.value.length);
if(event.target.value.length == 0){
// console.log("触发");
var num = 0;
}
// console.log(num);
if(event.target.value.slice(0,1)==0&&event.target.value.length>1){
num = event.target.value.slice(1);
}
var cart = this.state.cart;
cart[index].num = num;
this.setState({
cart:cart
})
}
// 调用计算总价
this.calcAll();
},
// 按钮数量减法
calcDown:function (index) {
var num = this.state.cart[index].num;
num = num - 1;
num = num<0?0:num;
var cart = this.state.cart;
cart[index].num = num;
this.setState({
cart:cart
});
// 调用计算总价
this.calcAll();
},
calcUp:function (index) {
var num = this.state.cart[index].num;
// num---input框手动输入后类型为字符串,故进行类型转换
num = num*1 + 1;
var cart = this.state.cart;
cart[index].num = num;
this.setState({
cart:cart
});
// 调用计算总价
this.calcAll();
},
// 计算总价
calcAll:function () {
var totalPrices = 0;
var cart = this.state.cart;
for(var i=0;i<cart.length;i++){
if(cart[i].isChecked){
totalPrices += cart[i].reduct_price * cart[i].num;
}
}
this.setState({
totalPrices:totalPrices
});
// 调用计算选中商品数量
this.sumAmount();
// 调用计算优惠的价格
this.discountsFn();
},
// 计算选中商品数量
sumAmount:function () {
var amount = 0;
var cart = this.state.cart;
for(var i=0;i<cart.length;i++){
if(cart[i].isChecked){
amount += parseInt(cart[i].num);
}
}
this.setState({
amount:amount
})
},
// 计算已优惠多少
discountsFn:function () {
var discounts = 0;
var cart = this.state.cart;
for(var i=0;i<cart.length;i++){
if(cart[i].isChecked){
discounts += cart[i].num * (cart[i].original_price-cart[i].reduct_price);
}
}
this.setState({
discounts:discounts
})
}
});