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