标签：count index return item price 案例 books
<!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>
标签：count,index,return,item,price,案例,books 来源： https://www.cnblogs.com/eric-share/p/15126780.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。