<!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>