网站建设网点,深圳物流公司排名前十,wordpress中页面编辑,网站设计服务表React从入门到精通之购物车案例1. 购物车需求说明使用到的data list2. 项目code1. 购物车需求说明 list data展示到列表中每个item的通过按钮来控制购买的数据量删除按钮可以删除当前的itemTotal Price计算当前购物车的总的价格
使用到的data list
const books [{id: 1,name…
React从入门到精通之购物车案例1. 购物车需求说明使用到的data list2. 项目code1. 购物车需求说明 list data展示到列表中每个item的通过±按钮来控制购买的数据量删除按钮可以删除当前的itemTotal Price计算当前购物车的总的价格
使用到的data list
const books [{id: 1,name: introduction to algorithms,date: 2006-9,price: 85.00,count: 1},{id: 2,name: The Art of UNIX Programming,date: 2006-2,price: 59.00,count: 1},{id: 3,name: Programming pearls,date: 2008-10,price: 39.00,count: 1},{id: 4,name: Complete code,date: 2006-3,price: 128.00,count: 1},] 2. 项目code
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleshop car demo/titlestyletable {border-collapse: collapse;text-align: center;}thead {background-color: #f2f2f2;}td, th {padding: 10px 16px;border: 1px solid #aaa; }/style
/head
bodydiv idroot/div!-- import react dependencies --script src../../lib/react.js/scriptscript src../../lib/react-dom.js/scriptscript src../../lib/babel.js/script!-- import data --script src./data.js/scriptscript typetext/babel// component Appclass App extends React.Component {constructor(){super()this.state {books: books}}// add sumincrement(index) {const newBooks [...this.state.books]newBooks[index].count 1this.setState({ books: newBooks })}// reduce sum decrement(index) {const newBooks [...this.state.books]newBooks[index].count - 1this.setState({ books: newBooks })}/*delte item from table*/deleteItem(index) {const newBooks [...this.state.books]newBooks.splice(index, 1)this.setState({ books: newBooks })}render(){const { books } this.statereturn (divtabletheadtrtdOrder/tdtdName/tdtdPublish Date/tdtdPrice/tdtdBought Sum/tdtdOperation/td/tr/theadtbody{books.map((item, index) {return (tr key{ item.id }td{ index 1 }/tdtd{ item.name }/tdtd{ item.date }/tdtd{ $ item.price }/tdtdbutton disabled{ item.count 1 } onClick{ () {this.decrement(index)} }-/button{ item.count }button onClick{ () {this.increment(index)} }/button/tdtdbutton onClick{ () {this.deleteItem(index)} }Delete/button/td/tr)})}/tbody/tableh2Total Price: $ {books.reduce((preValue, item) preValue item.count * item.price, 0)}/h2/div)}}// create react domconst root ReactDOM.createRoot(document.querySelector(#root))// dom render by reactroot.render(App/)/script/body
/html
