分享一个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里面的值,条件渲染,对象的属性遍历等。
今天的案例分享完毕 谢谢阅读