案例

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <style>
        table{
            border: 1px solid #eee;
            border-collapse: collapse;
        }
        th,td{
            border: 1px solid #eee;
            padding: 10px 16px;
            text-align: center;
        }

        th{
            #aaa; 
        }
        .count{
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    

    <script>

        function fromatPrice(price){
            if(typeof price !== 'number'){
                price = Number(price) || 0;
            }
            return '￥' + price.toFixed(2);
        }

    </script>
    <script type="text/babel">
 
        // 封装App 组件
        class App extends React.Component{
            
            constructor(){
                super(); 
                this.state = {
                   books:[
                       {
                           id:1,
                           name:"<<算法导论>>",
                           date:'2006-9',
                           price:85,
                           count:2
                       },
                       {
                           id:2,
                           name:"<<html>>",
                           date:'2006-2',
                           price:59,
                           count:1
                       },
                       {
                           id:3,
                           name:"<<css>>",
                           date:'2008-10',
                           price:39,
                           count:1
                       },
                       {
                           id:4,
                           name:"<<js>>",
                           date:'2006-3',
                           price:128,
                           count:1
                       }
                   ]
                }
            }

            renderBooks(){
                return ( 
                    <div>
                       <table>
                         <thead>
                             <th>编号</th> 
                             <th>书籍名称</th> 
                             <th>出版日期</th> 
                             <th>价格</th> 
                             <th>购买数量</th> 
                             <th>操作</th>
                         </thead>
                         <tbody>
                            {
                                this.state.books.map((item,index)=>{
                                    return (
                                        <tr>
                                            <td>{index + 1}</td> 
                                            <td>{item.name}</td> 
                                            <td>{item.date}</td> 
                                            <td>{fromatPrice(item.price)}</td>
                                            <td>
                                               <button   disabled = {item.count <=1}  onClick = {e => this.changeBookCount(index,-1)}>-</button> 
                                               <span className="count">{item.count}</span>
                                               <button onClick = {e => this.changeBookCount(index,1)}>+</button> 
                                            </td>
                                            <td><button onClick={e => this.removeBook(index)}>移除</button></td>
                                        </tr>
                                    )
                                })
                            }
                             
                            </tbody>
                        </table>
                        <h2>总价格: {this.getTotalPrice()}</h2>
                    </div> 
                )
            }

            renderEmptyTip(){
                return <h2>购物车为空~</h2>
            }

            render(){ 
               return  this.state.books.length ? this.renderBooks() : this.renderEmptyTip();
            } 

            changeBookCount(index,count){
                const newBooks = [...this.state.books];
                newBooks[index].count += count;
                this.setState({
                    books:newBooks
                })
            }

            removeBook(index){
                // console.log(index);  
                this.setState({
                    books: this.state.books.filter((item,indey)=> index !== indey )
                })
            }

            // 获取总价格
            getTotalPrice(){
            //   let totalPrice = 0;
            //   for(let item of this.state.books){
            //       totalPrice += item.price * item.count;
            //   } 
 
             let totalPrice = this.state.books.reduce((preValue,item)=>{
                return  preValue + item.price * item.count;
             },0);
 
             return  fromatPrice(totalPrice);

            }
        }
 
        ReactDOM.render(<App/>,document.getElementById('app')); 
    </script>
</body>
</html>
posted @ 2021-08-11 09:15  13522679763-任国强  阅读(18)  评论(0)    收藏  举报