react实现购物车(方法三)

import React, { useState } from 'react';
import { Button, List } from 'antd-mobile';
 
// 购物车组件
export default function Cart({ products, onCheckoutClicked }) {
  const [cart, setCart] = useState(products);
 
  // 添加商品到购物车
  const addToCart = (product) => {
    setCart([...cart, product]);
  };
 
  // 移除商品
  const removeProduct = (index) => {
    let newCart = [...cart];
    newCart.splice(index, 1);
    setCart(newCart);
  };
 
  // 计算总价
  const calculateTotal = () => {
    return cart.reduce((total, item) => {
      return total + item.price;
    }, 0);
  };
 
  return (
    <div>
      <div>
        <List>
          {cart.map((product, index) => (
            <List.Item
              key={index}
              prefix={<div style={{ color: 'green', marginRight: 6 }}>{product.quantity}</div>}
              title={product.name}
              describe={`$${product.price}`}
              extra={
                <Button
                  type="ghost"
                  size="small"
                  inline
                  onClick={() => removeProduct(index)}
                >移除</Button>
              }
            />
          ))}
        </List>
      </div>
      <div style={{ marginTop: 10 }}>
        <div>总价: ${calculateTotal()}</div>
        <Button type="primary" onClick={onCheckoutClicked}>结账</Button>
      </div>
    </div>
  );
}

这个例子中，我们使用了Ant Design Mobile组件库来创建一个更加美观的用户界面。我们使用了List组件来展示购物车中的商品，并且使用Button组件来实现移除商品和结账的功能。代码示例中包含了添加商品到购物车、移除商品以及计算总价的逻辑，这些是实现一个基本购物车功能所必需的核心操作。