邂逅react(六)-jsx小案例分享

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