用react写一个购物车页面
时间: 2023-12-18 14:05:33 浏览: 29
好的,以下是一个简单的购物车页面,使用React编写。
首先,我们需要创建一个React组件来表示购物车页面。在这个组件中,我们将渲染购物车中的商品列表以及总价格。
```javascript
import React, { useState } from 'react';
function ShoppingCart() {
// 商品列表
const [items, setItems] = useState([
{ id: 1, name: 'Product A', price: 10 },
{ id: 2, name: 'Product B', price: 20 },
{ id: 3, name: 'Product C', price: 30 },
]);
// 已选商品列表
const [selectedItems, setSelectedItems] = useState([]);
// 计算总价格
const totalPrice = selectedItems.reduce((total, item) => total + item.price, 0);
// 处理商品选择事件
const handleSelectItem = (item) => {
setSelectedItems([...selectedItems, item]);
};
// 渲染商品列表
const renderItems = () => {
return items.map((item) => (
<div key={item.id}>
{item.name} - ${item.price}
<button onClick={() => handleSelectItem(item)}>Add to cart</button>
</div>
));
};
// 渲染已选商品列表
const renderSelectedItems = () => {
return selectedItems.map((item) => (
<div key={item.id}>
{item.name} - ${item.price}
</div>
));
};
return (
<div>
<h1>Shopping Cart</h1>
<div>
<h2>Available Items</h2>
{renderItems()}
</div>
<div>
<h2>Selected Items</h2>
{renderSelectedItems()}
<p>Total price: ${totalPrice}</p>
</div>
</div>
);
}
export default ShoppingCart;
```
在上面的代码中,我们使用useState hook来管理商品列表和已选商品列表。当用户点击“Add to cart”按钮时,我们将该商品添加到已选商品列表中。最后,我们使用reduce函数来计算总价格。
接下来,我们可以在我们的应用程序中使用这个组件。例如,在App.js文件中,我们可以这样使用:
```javascript
import React from 'react';
import ShoppingCart from './ShoppingCart';
function App() {
return (
<div>
<ShoppingCart />
</div>
);
}
export default App;
```
现在,我们已经有了一个简单的购物车页面,可以在其中选择商品并查看总价格。