分享一个 react 的经典小案例~~~
里面把很多 jsx 的用法都串起来了, 不啰嗦了上干货
<style>
td{
border:1px solid #ccc;
border-collapse:collapse;
padding:5px 15px 5px 15px;
}
thead{background: #ccc;}
button{margin:0 5px 0 5px;}
</style>
class App extends React.Component{constructor(){super()
this.state={
arrLists:[// 数据
{id:'d1',name:'女上衣',price:200,madeby:'棉质',count:0,prices:0},
{id:'d2',name:'裙子',price:300,madeby:'涤纶',count:0,prices:0},
{id:'d3',name:'睡衣',price:400,madeby:'桑蚕丝',count:0,prices:0},
{id:'d4',name:'裤子',price:150,madeby:'混合',count:0,prices:0},
{id:'d5',name:'袜子',price:10,madeby:'腈纶',count:0,prices:0}
]
}
}
render(){
return (
<div>
<table cellPadding="0" cellSpacing="0">
<thead>
<tr>
<td> 类型 </td>
<td> 价格 </td>
<td> 材质 </td>
<td> 数量 </td>
<td> 结算价 </td>
</tr>
</thead>
<tbody>
{this.state.arrLists.map((item,index)=>{//map 遍历数组对象的每一项
return <tr key={item.id}>
<td>{item.name}</td>
<td>{item.price}</td>
<td>{item.madeby}</td>
{/* 绑定点击事件, 箭头函数的形式绑定 this, 传入按钮类型参数判断当前按钮增加还是减少 */}
<td><button onClick={e=>this.changeCount(index,'add',item.count,item.price,
item.prices)}>+</button>
{item.count}
<button onClick={e=>this.changeCount(index,'decrease',item.count,item.price,
item.prices)}>-</button></td>
<td>{item.prices=item.price*item.count}</td>
</tr>
})}
</tbody>
</table>
{/* 获取价格 */}
<h2> 总价:{this.getTotalPrice()}</h2>
</div>
)
}
changeCount(index,type,count,price,prices){console.log(index,type,count,price,prices)
if(type=='add'){
this.setState({count:this.state.arrLists[index].count++,
})
}else if(type=='decrease'&&count>0){// 判断按钮类型 避免减到负数
this.setState({count:this.state.arrLists[index].count--,
prices:count*price
})
}
}
getTotalPrice(){
let totalPrice=0
for(let item of this.state.arrLists){//for of 方法遍历获取对象里面的属性
totalPrice+=item.prices
}
return totalPrice
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
小结: 这个小案例包括以下知识点: 事件绑定, 传参, 获取和改变 state 里面的值, 条件渲染, 对象的属性遍历等。
今天的案例分享完毕 谢谢阅读