ReactJS添加到购物车功能

import React, { useState } from 'react';

function Product({ id, name, price }) {
  const [inCart, setInCart] = useState(false);

  const addToCart = () => {
    setInCart(true);
    // 这里可以添加代码将商品信息发送到服务器或保存到 localStorage
    localStorage.setItem('cart', JSON.stringify([...getCart(), { id, name, price }]));
  };

  return (
    <div>
      <h3>{name}</h3>
      <p>${price}</p>
      {!inCart ? (
        <button onClick={addToCart}>Add to Cart</button>
      ) : (
        <span>In Cart</span>
      )}
    </div>
  );
}

function getCart() {
  const cart = localStorage.getItem('cart');
  return cart ? JSON.parse(cart) : [];
}

function App() {
  return (
    <div>
      <Product id="1" name="Laptop" price={999} />
      <Product id="2" name="Smartphone" price={499} />
      {/* 显示购物车内容 */}
      <div>
        <h2>Cart</h2>
        {getCart().map(item => (
          <div key={item.id}>
            <p>{item.name} - ${item.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

window.addEventListener('storage', (event) => {
  if (event.key === 'cart') {
    // 更新本地状态以反映最新的购物车数据
  }
});