好了，上幾周我們學(xué)習(xí)了一些react的基礎(chǔ)東西。地基以及材料都準備好了，肯定是需要蓋樓盤的。react我們既然學(xué)習(xí)了，就是要用它來實現(xiàn)web項目應(yīng)用的，這次我們也來初識成果的時候了。

一、準備

我是從淘寶網(wǎng)上下載了一些圖片以及產(chǎn)品說明啊，規(guī)格啊，價格什么的，當然你也可以去其它地方拿物料。我是為了節(jié)省切圖時間，所以直接拿了他們的。首先，我們要清楚購物車的實現(xiàn)有那幾部分。購物車主要分為三部分，購物車的頭部，既購物車標題部分。購物車商品部分（這也是我們最重要的一部分）。第三部分就是購物車尾部，尾部主要是一些合計啊，計算什么的，好了，我們下面一一來看下這三部分。

二、購物車頭部

購物車頭部，也就是最簡單的標題部分，主要實現(xiàn)一些樣式就可以了，下面是部分代碼。

<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'>數(shù)量</li>
        <li className='li-price'>單價</li>
      </ul>
 </div>

三、購物車商品部分

這一部分也是最重要部分，我把它抽離出來作為了一個子組件部分，當然了，最好的方式是將這三部分都抽離成組件，這里為了節(jié)省時間，我就不抽離出來了。這部分的主要的一部分代碼如下。
主程序部分

{
   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();
}

四、合計部分

第四部分代碼主要是對整個數(shù)據(jù)的統(tǒng)計，以及對購物車篩選的商品進行增加刪除等操作。這里省去了結(jié)算的功能。

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
    })
}

好了寫到這里就差不多快結(jié)束了，自己也剛接觸react，沒有實戰(zhàn)經(jīng)驗，寫的不是太好，同時，代碼寫的也不是很好。這里分享的只是部分代碼，如果大家想看完整代碼可以去我的github上面看，歡迎大家指正。同時因為時間問題，樣式我沒有做很好的調(diào)整以及部分功能沒有實現(xiàn)，后期會補上。謝謝。我的倉庫地址是：https://github.com/jiosers/react-study/blob/master/react/index5.html