[react]4.1、练习
2021-10-26 本文已影响0人
史记_d5da
1、在界面上以表格的形式，显示一些书籍的数据；
2、在底部显示书籍的总价格；
3、点击+或者-可以增加或减少书籍数量（如果为1，那么不能继续-）；
4、点击移除按钮，可以将书籍移除
练习
// utils.js
function formatPrice(price) {
if (typeof price !== "number") {
price = Number(price) || 0 // 逻辑或运算
}
return "￥" + price.toFixed(2);
}
// index.html
<!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>
</head>
<body>
<div id="app"></div>
<style>
table {
border: 1px solid #eee;
border-collapse: collapse;
}
td,
th {
border: 1px solid #eee;
padding: 10px 16px;
text-align: center;
}
th {
background-color: #aaa;
}
.counter {
margin: 0 5px;
}
</style>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="./format_util.js"></script>
<script type="text/babel">
class App extends React.Component {
constructor() {
super()
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
},
]
}
}
render() {
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>
<td>{index + 1}</td>
<td>{item.name}</td>
<td>{item.date}</td>
<td>{formatPrice(item.price)}</td>
<td>
<button disabled={item.count < 1} onClick={e => {
this.onChangeBooks(index, -1);
}}>-</button>
<span className="counter">{item.count}</span>
<button onClick={() => {
this.onChangeBooks(index, 1);
}}>+</button>
</td>
<td>
<button onClick={() => {
this.removeBook(index);
}}>移除</button>
</td>
</tr>
)
})
}
</tbody>
</table>
<h2>总价格: + {this.getTotalPrice()}</h2>
</div>
)
}
onChangeBooks(index, count) {
const newBooks = [... this.state.books];
newBooks[index].count += count;
this.setState({
books: newBooks
})
}
removeBook(index) {
this.setState({
books: this.state.books.filter((item, indey) => index !== indey)
})
}
getTotalPrice() {
// reduce
// 返回函数的参数
// 函数回调的结果（第一次没有回调结果用函数的初始化值）
const totalPrice = this.state.books.reduce((preValue, item, arr) => {
return preValue + item.price * item.count;
}, 0);
return formatPrice(totalPrice);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
</html>
