ReactJS价目表计算、购物车逻辑及目标网页技术栈咨询

1. 该网页是否仅使用React开发？ #

通过开发者工具分析目标页面的DOM结构与前端资源，页面没有React应用特有的标识（如data-reactroot属性、React相关打包文件），且存在大量原生JavaScript/jQuery风格的DOM操作痕迹，同时页面URL后缀为.php，说明它大概率是后端PHP模板结合原生JS/jQuery开发，并非仅使用React实现。

2. 若基于React实现，价目表的计算逻辑是怎样的？ #

用React实现价目表计算，核心是通过状态管理与衍生计算实现实时更新：

• 状态定义：用useState维护商品数据数组，每个商品对象包含id、name、price（单价）、quantity（数量）、checked（选中状态）等字段。
• 实时计算总价：用useMemo监听商品状态变化，过滤出选中的商品，遍历计算每个商品的总价（单价×数量），再累加得到总金额，避免不必要的重复计算。
• 状态更新触发：当用户修改商品数量、切换选中状态时，更新对应商品的状态值，useMemo会自动重新计算总价。

示例核心代码：

import { useState, useMemo } from 'react';

function PriceTable() {
  const [products, setProducts] = useState([
    { id: 1, name: "商品A", price: 50, quantity: 1, checked: false },
    { id: 2, name: "商品B", price: 80, quantity: 1, checked: false }
  ]);

  // 计算选中商品的总价
  const totalAmount = useMemo(() => {
    return products
      .filter(item => item.checked)
      .reduce((total, item) => total + item.price * item.quantity, 0);
  }, [products]);

  // 修改商品数量的方法
  const updateQuantity = (id, newQuantity) => {
    setProducts(prev => prev.map(item => 
      item.id === id ? {...item, quantity: newQuantity} : item
    ));
  };

  // 切换商品选中状态的方法
  const toggleChecked = (id) => {
    setProducts(prev => prev.map(item => 
      item.id === id ? {...item, checked: !item.checked} : item
    ));
  };

  return (
    <div>
      {products.map(item => (
        <div key={item.id}>
          <input type="checkbox" checked={item.checked} onChange={() => toggleChecked(item.id)} />
          <span>{item.name}</span>
          <input type="number" value={item.quantity} onChange={(e) => updateQuantity(item.id, Number(e.target.value))} />
          <span>{item.price}元</span>
        </div>
      ))}
      <div>总价：{totalAmount}元</div>
    </div>
  );
}

3. 选中商品提交后如何将商品移入购物车？ #

React中实现该逻辑，需要维护两个核心状态：待选商品列表、购物车商品列表，提交时按以下流程处理：

• 筛选选中项：点击提交按钮时，从待选商品列表中过滤出checked为true的商品。
• 合并购物车商品：遍历选中的商品，检查购物车中是否已存在同ID的商品：
  • 若存在：更新该商品的数量（原有数量 + 当前选中商品的数量）
  • 若不存在：将选中商品添加到购物车列表（同时取消选中状态）
• 更新待选列表：将待选列表中已提交的商品重置为未选中、数量为1的状态，或直接移除（根据业务需求）。

示例核心代码：

import { useState } from 'react';

function OrderPage() {
  const [productList, setProductList] = useState([
    { id: 1, name: "商品A", price: 50, quantity: 1, checked: false },
    { id: 2, name: "商品B", price: 80, quantity: 1, checked: false }
  ]);
  const [cart, setCart] = useState([]);

  const handleSubmit = () => {
    const selectedItems = productList.filter(item => item.checked);
    if (selectedItems.length === 0) return;

    // 更新购物车
    setCart(prevCart => {
      const updatedCart = [...prevCart];
      selectedItems.forEach(item => {
        const existingItem = updatedCart.find(cartItem => cartItem.id === item.id);
        if (existingItem) {
          existingItem.quantity += item.quantity;
        } else {
          updatedCart.push({...item, checked: false});
        }
      });
      return updatedCart;
    });

    // 重置待选商品的选中状态与数量
    setProductList(prevList => 
      prevList.map(item => 
        item.checked ? {...item, checked: false, quantity: 1} : item
      )
    );
  };

  return (
    <div>
      {/* 待选商品列表 */}
      <div className="product-list">
        {productList.map(item => (
          <div key={item.id}>
            <input type="checkbox" checked={item.checked} onChange={() => setProductList(prev => prev.map(p => p.id === item.id ? {...p, checked: !p.checked} : p))} />
            <span>{item.name}</span>
            <input type="number" value={item.quantity} onChange={(e) => setProductList(prev => prev.map(p => p.id === item.id ? {...p, quantity: Number(e.target.value)} : p))} />
          </div>
        ))}
      </div>
      
      <button onClick={handleSubmit}>加入购物车</button>

      {/* 购物车列表 */}
      <div className="cart">
        <h3>购物车</h3>
        {cart.map(item => (
          <div key={item.id}>
            <span>{item.name}</span>
            <span>数量：{item.quantity}</span>
            <span>小计：{item.price * item.quantity}元</span>
          </div>
        ))}
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者kishore kumar