传递回调函数以在React中构建购物车功能

function addToCart(product) {
  // 将商品添加到购物车中的逻辑
}

function Product(props) {
  const { name, price } = props;

  return (
    <div>
      <h3>{name}</h3>
      <p>{price}</p>
      <button onClick={() => addToCart(props)}>添加到购物车</button>
    </div>
  );
}

function updateQuantity(product, quantity) {
  // 更新购物车中商品的数量的逻辑
}

function CartItem(props) {
  const { product, quantity } = props;

  return (
    <div>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
      <input
        type="number"
        value={quantity}
        onChange={(e) => updateQuantity(product, e.target.value)}
      />
    </div>
  );
}

function removeItem(product) {
  // 从购物车中移除商品的逻辑
}

function CartItem(props) {
  const { product } = props;

  return (
    <div>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
      <button onClick={() => removeItem(product)}>删除</button>
    </div>
  );
}