React实现简易购物车项目(删除，数量加减,总价等)

才学react不久，来分享一个简易的demo，并且当购物车为空的时候展示购物车为空

先定义一个价格格式化的函数,把价格转成：¥+并且保留两位小数

function formatPrice(price){
  if(typeof price !=="number"){
    price = Number("aaa") || 0
  }
  return "¥"+ price.toFixed(2)
}

再定义一个类组件，state里面这样的数据

class Movie extends React.Component{
constructor(){
super()
this.state={
  books:[
  {id:1,name:"《算法导论》",datas:'2006-9',price:25,numbers:1},
  {id:2,name:"《编程艺术》",datas:'2006-9',price:45,numbers:1},
  {id:3,name:"《代码大全》",datas:'2006-9',price:15,numbers:1},
  {id:4,name:"《天演论》",datas:'2006-9',price:115,numbers:1},
], 
}
}

增加，减少功能

<button onClick={()=>this.changeBookCount(index,-1)}
disabled={item.numbers ==1}>-</button>
<span>{item.numbers}</span>
<button onClick={()=>this.changeBookCount(index,1)}>+</button>

changeBookCount(index,count){
    const newBooks =[...this.state.books]
    newBooks[index].numbers +=count
    this.setState({
      books:newBooks
    })
  }

删除功能

<button onClick={()=>this.removeItem(index)}>移除</button>

removeItem(index){
   this.setState({
     books:this.state.books.filter((item,indey)=>index !=indey)
   })
  }

总价

  <h2>总价格:{this.getTotalprice()}</h2>

  getTotalprice(){
let totalPrice = this.state.books.reduce((pre,item)=>{
  return pre+item.price * item.numbers
},0)
return formatPrice(totalPrice)

}

最后附上所有代码

function formatPrice(price){
  if(typeof price !=="number"){
    price = Number("aaa") || 0
  }
  return "¥"+ price.toFixed(2)
}

class Movie extends React.Component{
  constructor(){
    super()
    this.state={
      books:[
      {id:1,name:"《算法导论》",datas:'2006-9',price:25,numbers:1},
      {id:2,name:"《编程艺术》",datas:'2006-9',price:45,numbers:1},
      {id:3,name:"《代码大全》",datas:'2006-9',price:15,numbers:1},
      {id:4,name:"《天演论》",datas:'2006-9',price:115,numbers:1},
    ], 
    }
  }

  renderBooks(){
    return( 
    <div>  
       <table>
       <thead>
       <tr>
       <th></th>
       <th>书籍名称</th>
       <th>出版日期</th>
       <th>价格</th>
       <th>购买数量</th>
       <th>操作</th>
       </tr>
      </thead>
      <tbody>
       {
         this.state.books.map((item,index)=>{
           return (
            <tr>
           <td>{index+1}</td>
           <td>{item.name}</td>
           <td>{item.datas}</td>
           <td>{formatPrice(item.price)}</td>
           <td>
           <button onClick={()=>this.changeBookCount(index,-1)}
           disabled={item.numbers ==1}>-</button>
           <span>{item.numbers}</span>
           <button onClick={()=>this.changeBookCount(index,1)}>+</button>
          </td>
           <td><button onClick={()=>this.removeItem(index)}>移除</button></td>
          </tr>)
         })
       }
      </tbody>
       </table>
       <h2>总价格:{this.getTotalprice()}</h2>
      </div>)
  }

  renderNone(){
    return <h2>购物车为空</h2>
  }
  render() {
    const {books} = this.state
    return books.length ==0?this.renderNone():this.renderBooks()
  }
  changeBookCount(index,count){
    const newBooks =[...this.state.books]
    newBooks[index].numbers +=count
    this.setState({
      books:newBooks
    })
  }
  removeItem(index){
   this.setState({
     books:this.state.books.filter((item,indey)=>index !=indey)
   })
  }
  // getTotalprice(){
  //   1.第一种
  //   let totalPrice = 0;
  //   for(let i of this.state.books){
  //     totalPrice +=i.price * i.numbers
  //   }
  //   return  formatPrice(totalPrice)
  // }
  //2.第二种
  getTotalprice(){
    let totalPrice = this.state.books.reduce((pre,item)=>{
      return pre+item.price * item.numbers
    },0)
    return formatPrice(totalPrice)
  }
}
ReactDOM.render(
  <Movie/>,document.getElementById('app')
)