购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>购物车案例</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>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script>
function formatPrice(price) {
return "￥" + Number(price).toFixed(2);
}
</script>
<script type="text/babel">
// 定义App根组件
class App extends React.Component {
constructor() {
super();
this.state = {
books: [
{ id: 1, name: "js红宝书", date: "2023-6-24", price: 9.9, count: 1 },
{ id: 2, name: "你不知道的js", date: "2023-6-25", price: 8.9, count: 1 },
{ id: 3, name: "js犀牛书", date: "2023-6-27", price: 6.9, count: 1 },
{ id: 4, name: "js重难点", date: "2023-6-22", price: 4.9, count: 1 },
],
};
}
getTotalPrice() {
return this.state.books.reduce((pre, cur) => {
return pre + cur.price * cur.count;
}, 0);
}
changeCount(index, count) {
let newbooks = [...this.state.books];
newbooks[index].count += count;
this.setState({
books: newbooks,
});
}
removeItem(index) {
let newbooks = [...this.state.books];
newbooks.splice(index, 1);
this.setState({
books: newbooks,
});
}
renderBookList() {
const { books } = this.state;
return (
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{books.map((item, index) => {
return (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.date}</td>
<td>{formatPrice(item.price)}</td>
<td>
<button disabled={item.count <= 1} onClick={() => this.changeCount(index, -1)}>
-
</button>
{" " + item.count + " "}
<button onClick={() => this.changeCount(index, 1)}>+</button>
</td>
<td>
<button onClick={() => this.removeItem(index)}>删除</button>
</td>
</tr>
);
})}
</tbody>
</table>
<h2>总价格：{formatPrice(this.getTotalPrice())}</h2>
</div>
);
}
renderBookEmpty() {
return <h1>购物车没有东西哦，快去添加┗|｀O′|┛ 嗷~~</h1>;
}
render() {
const { books } = this.state;
let isEmpty = !books.length;
// let ele = (
// <div>
// <table>
// <thead>
// <tr>
// <th>序号</th>
// <th>书籍名称</th>
// <th>出版日期</th>
// <th>价格</th>
// <th>购买数量</th>
// <th>操作</th>
// </tr>
// </thead>
// <tbody>
// {books.map((item, index) => {
// return (
// <tr key={item.id}>
// <td>{item.id}</td>
// <td>{item.name}</td>
// <td>{item.date}</td>
// <td>{formatPrice(item.price)}</td>
// <td>
// <button disabled={item.count <= 1} onClick={() => this.changeCount(index, -1)}>
// -
// </button>
// {" " + item.count + " "}
// <button onClick={() => this.changeCount(index, 1)}>+</button>
// </td>
// <td>
// <button onClick={() => this.removeItem(index)}>删除</button>
// </td>
// </tr>
// );
// })}
// </tbody>
// </table>
// <h2>总价格：{formatPrice(this.getTotalPrice())}</h2>
// </div>
// );
// if (isEmpty) return ele;
// return <h1>购物车没有东西哦，快去添加┗|｀O′|┛ 嗷~~</h1>;
return !isEmpty ? this.renderBookList() : this.renderBookEmpty();
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
</script>
</body>
</html>
