React從入門到精通之購物車案例
1. 購物車需求說明
React從入門到精通二1. 購物車需求說明2. 項目code - list data展示到清單中
- 每個item的通過±按鈕來控制購買的資料量
- 删除按鈕可以删除目前的item
- Total 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 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>shop car demo</title>
<style>
table {
border-collapse: collapse;
text-align: center;
}
thead {
background-color: #f2f2f2;
}
td, th {
padding: 10px 16px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id="root"></div>
<!-- import react dependencies -->
<script src="../../lib/react.js"></script>
<script src="../../lib/react-dom.js"></script>
<script src="../../lib/babel.js"></script>
<!-- import data -->
<script src="./data.js"></script>
<script type="text/babel">
// component App
class App extends React.Component {
constructor(){
super()
this.state = {
books: books
}
}
// add sum
increment(index) {
const newBooks = [...this.state.books]
newBooks[index].count += 1
this.setState({ books: newBooks })
}
// reduce sum
decrement(index) {
const newBooks = [...this.state.books]
newBooks[index].count -= 1
this.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.state
return (
<div>
<table>
<thead>
<tr>
<td>Order</td>
<td>Name</td>
<td>Publish Date</td>
<td>Price</td>
<td>Bought Sum</td>
<td>Operation</td>
</tr>
</thead>
<tbody>
{
books.map((item, index) => {
return (
<tr key={ item.id }>
<td>{ index + 1 }</td>
<td>{ item.name }</td>
<td>{ item.date }</td>
<td>{ '$' + item.price }</td>
<td>
<button disabled={ item.count <=1 } onClick={ () => {this.decrement(index)} }>-</button>
{ item.count }
<button onClick={ () => {this.increment(index)} }>+</button>
</td>
<td>
<button onClick={ () => {this.deleteItem(index)} }>Delete</button>
</td>
</tr>
)
})
}
</tbody>
</table>
<h2>Total Price: $ {books.reduce((preValue, item) => preValue + item.count * item.price, 0)}</h2>
</div>
)
}
}
// create react dom
const root = ReactDOM.createRoot(document.querySelector("#root"))
// dom render by react
root.render(<App/>)
</script>
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)