功能
1.在界面上以表格的形式，显示一些书籍的数据；
2.在底部显示书籍的总价格；
3.点击+或者-可以增加或减少书籍数量（如果为1，那么不能继续-）；
4.实时计算总价格
5.点击移除按钮，可以将书籍移除（没有书籍时，显示：空空如也~）；
image.png
image.png
完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
thead {
background: #dddddd;
}
tr{
width: 600px;
height: 50px;
}
th {
font-size: 16px;
padding: 5px 35px;
font-weight: bold;
}
tbody {
background: #eeeeee;
}
td {
text-align: center;
padding: 0 20px;
}
.count {
margin: 0 10px;
}
</style>
</head>
<body>
<div id="app">
</div>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
books: [
{
id: 1,
name: '《算法导论》',
date: '2006-9',
price: 85.00,
count: 1
},
{
id: 2,
name: '《UNIX编程艺术》',
date: '2006-2',
price: 59.00,
count: 1
},
{
id: 3,
name: '《编程珠玑》',
date: '2008-10',
price: 39.00,
count: 1
},
{
id: 4,
name: '《代码大全》',
date: '2006-3',
price: 128.00,
count: 1
},
]
}
}
// 格式化价格
formatPrice(price) {
if (typeof price !== "number") {
price = Number(price) || 0
}
return "￥" + price
}
// 增加 / 减少数量
changeItem(index, counter) {
const books = [...this.state.books]
this.setState({
books: books.map((item, indey) => {
if (index === indey) {
item.count += counter
}
return item
})
})
}
// 移除书籍
removeItem(index) {
const books = [...this.state.books]
this.setState({
books: books.filter((item, indey) => index !== indey)
})
}
// 计算总数
totalPrice() {
return this.state.books.reduce((prev, curr) => {
return prev + curr.price * curr.count
}, 0)
}
// 监听变化
isNotBook() {
return this.state.books.length <= 0
}
// 渲染书籍
renderBooks() {
return (
<div>
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{this.state.books.map((item, index) => {
return (
<tr key={item.id}>
<td>{index + 1}</td>
<td>{item.name}</td>
<td>{item.date}</td>
<td>{this.formatPrice(item.price)}</td>
<td>
<button disabled={item.count <= 1} onClick={e => this.changeItem(index, -1)}>-</button>
<span className="count">{item.count}</span>
<button onClick={e => this.changeItem(index, 1)}>+</button>
</td>
<td>
<button onClick={e => this.removeItem(index)}>移除</button>
</td>
</tr>
)
})}
</tbody>
</table>
<p>
总价格
<strong> ￥{this.totalPrice()}</strong>
</p>
</div>
)
}
// 处理空值
renderEmpty() {
return <h2>空空如也~</h2>
}
render() {
return !this.isNotBook() ? this.renderBooks() : this.renderEmpty()
}
}
ReactDOM.render(<App/>, document.getElementById("app"))
</script>
</body>
</html>
END
网友评论