才学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')
)