好了，上几周我们学习了一些react的基础东西。地基以及材料都准备好了，肯定是需要盖楼盘的。react我们既然学习了，就是要用它来实现web项目应用的，这次我们也来初识成果的时候了。
一、准备
我是从淘宝网上下载了一些图片以及产品说明啊，规格啊，价格什么的，当然你也可以去其它地方拿物料。我是为了节省切图时间，所以直接拿了他们的。首先，我们要清楚购物车的实现有那几部分。购物车主要分为三部分，购物车的头部，既购物车标题部分。购物车商品部分（这也是我们最重要的一部分）。第三部分就是购物车尾部，尾部主要是一些合计啊，计算什么的，好了，我们下面一一来看下这三部分。
二、购物车头部
购物车头部，也就是最简单的标题部分，主要实现一些样式就可以了，下面是部分代码。
<h3><span>购物车</span></h3>
<div id='buyCarTitle'>
<ul className='car-list'>
<li className='li-checkbox'><input type='checkbox' id='allSelect'/>全选</li>
<li className='li-info'>商品信息</li>
<li className='li-operation'>操作</li>
<li className='li-amount'>金额</li>
<li className='li-num'>数量</li>
<li className='li-price'>单价</li>
</ul>
</div>
三、购物车商品部分
这一部分也是最重要部分，我把它抽离出来作为了一个子组件部分，当然了，最好的方式是将这三部分都抽离成组件，这里为了节省时间，我就不抽离出来了。这部分的主要的一部分代码如下。
主程序部分
{
this.state.goodsList.map((item, index) => {
return (
<GoodList item={item} key={index} refresh={this.refresh.bind(this)}/>
)
})
}
组件部分
return(
<div ref='main' className='goods-car'>
<ul className='goods-list'>
<li className='li-checkbox'><input type='checkbox' defaultChecked={this.props.item.check}/></li>
<li className='li-info'>
<div className='goods-img'><img src={this.props.item.image} /></div>
<div className='goods-title'>{this.props.item.title}</div>
<div className='goods-specifications'>{this.props.item.specifications} </div>
</li>
<li className='li-operation'>
<div className='goods-oper' onClick={this.delGoods.bind(this, this.props.item.id)}>删除</div>
</li>
<li className='li-amount'>
<div className='goods-amount' >{this.props.item.num*this.props.item.price}</div>
</li>
<li className='li-num'>
<span className='goods-num-btn goods-num-minus' onClick={this.minusNum.bind(this, this.props.item.id)}>-</span>
<input type='text' className='goods-num' readOnly='true' value={this.props.item.num}/>
<span className='goods-num-btn goods-num-add' onClick={this.addNum.bind(this, this.props.item.id)}>+</span>
</li>
<li className='li-price'>
<div className='goods-original'>{this.props.item.original}</div>
<div className='goods-price'>{this.props.item.price}</div>
</li>
</ul>
</div>
)
delGoods(id) {
for(let i = 0; i < goodsList.length; i++) {
if(goodsList[i].id === id) {
goodsList[i].splice(i, 1);
break;
}
}
//this.refs.main.innerHTML= '';
this.props.refresh();
}
minusNum(id) {
for(let i = 0; i < goodsList.length; i++) {
if(goodsList[i].id === id) {
goodsList[i].num--;
break;
}
}
this.props.refresh();
}
四、合计部分
第四部分代码主要是对整个数据的统计，以及对购物车筛选的商品进行增加删除等操作。这里省去了结算的功能。
constructor(props) {
super(props);
this.state={
goodsTotal: 0,
goodsAmounts: 0
}
}
checkAllGoods(e) {
const targetCheck = e.target.checked;
goodsList.map(item=>{
item.check = targetCheck;
})
this.props.refresh();
}
componentDidMount() {
const checkedList = goodsList.filter(item => item.check);
let goodsAmounts = 0;
checkedList.forEach(item => {
goodsAmounts += item.num*item.price;
});
this.setState({
goodsTotal: checkedList.length,
goodsAmounts: goodsAmounts
})
}
好了写到这里就差不多快结束了，自己也刚接触react，没有实战经验，写的不是太好，同时，代码写的也不是很好。这里分享的只是部分代码，如果大家想看完整代码可以去我的github上面看，欢迎大家指正。同时因为时间问题，样式我没有做很好的调整以及部分功能没有实现，后期会补上。谢谢。我的仓库地址是：https://github.com/jiosers/react-study/blob/master/react/index5.html
