[gtp]购物车案例参考

这篇具有很好参考价值的文章主要介绍了[gtp]购物车案例参考。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

react hooks,购物车案例.

在列表上点击+或者-更新数量,调用接口更新单个价格. 点击table的checkbox勾选后,计算总价?

[gtp]购物车案例参考,# S2.React TS,前端,react.js

对于React Hooks和购物车案例,您可以使用useState来管理列表中商品的数量和总价。当点击"+“或”-"按钮时,可以更新相应商品的数量,并通过调用接口来更新单个商品的价格。当勾选表格中的复选框时,可以使用一个状态来记录被选中的商品,并根据选中的商品重新计算总价。

下面是一个简单的示例代码:

import React, { useState } from 'react';

const ShoppingCart = () => {
  const [items, setItems] = useState([
    { id: 1, name: '商品1', quantity: 1, price: 10 },
    { id: 2, name: '商品2', quantity: 2, price: 20 },
    // ...其他商品数据
  ]);
  const [selectedItems, setSelectedItems] = useState([]);
  
  const handleQuantityChange = (itemId, newQuantity) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === itemId ? { ...item, quantity: newQuantity } : item
      )
    );
    // 调用接口来更新单个商品的价格
    updateItemPrice(itemId, newQuantity);
  };
  
  const handleCheckboxChange = (itemId) => {
    setSelectedItems(prevSelectedItems => {
      if (prevSelectedItems.includes(itemId)) {
        return prevSelectedItems.filter(id => id !== itemId);
      } else {
        return [...prevSelectedItems, itemId];
      }
    });
  };
  
  const calculateTotalPrice = () => {
    let totalPrice = 0;
    selectedItems.forEach(itemId => {
      const selectedItem = items.find(item => item.id === itemId);
      totalPrice += selectedItem.quantity * selectedItem.price;
    });
    return totalPrice;
  };
  
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Select</th>
          </tr>
        </thead>
        <tbody>
          {items.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>
                <button onClick={() => handleQuantityChange(item.id, item.quantity - 1)}>-</button>
                {item.quantity}
                <button onClick={() => handleQuantityChange(item.id, item.quantity + 1)}>+</button>
              </td>
              <td>{item.price}</td>
              <td>
                <input
                  type="checkbox"
                  checked={selectedItems.includes(item.id)}
                  onChange={() => handleCheckboxChange(item.id)}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <p>Total Price: {calculateTotalPrice()}</p>
    </div>
  );
};

export default ShoppingCart;

updateItemPrice实现

const updateItemPrice = (itemId, newQuantity) => {
  // 构建请求参数
  const payload = {
    itemId: itemId,
    quantity: newQuantity
  };

  // 发起HTTP请求,更新商品价格
  fetch('/api/updateItemPrice', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
  })
    .then(response => response.json())
    .then(data => {
      // 处理成功响应
      console.log('Item price updated successfully.');
    })
    .catch(error => {
      // 处理错误
      console.error('Failed to update item price:', error);
    });
};

items = [
        {
          id:0,
          name:'zhangsan',
          quantity:1	,
          price	:11.00
        },
        {
          id:1,
          name:'zhangsan',
          quantity:2	,
          price	:13.00
        }
      ]
import React, { useState, useEffect } from 'react';

const ShoppingCart = () => {
  const [items, setItems] = useState([]);
  const [selectedItems, setSelectedItems] = useState([]);

  useEffect(() => {
    // 模拟从后端获取商品数据的函数
    const fetchItems = async () => {
      try {
        const response = await fetch('/api/items');
        const data = await response.json();
        setItems(data.items);
      } catch (error) {
        console.error('Failed to fetch items:', error);
      }
    };

    fetchItems();
  }, []);

  const handleQuantityChange = async (itemId, newQuantity) => {
    try {
      // 调用接口来更新单个商品的数量和价格
      const response = await fetch(`/api/updateItem/${itemId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ quantity: newQuantity })
      });

      if (response.ok) {
        const updatedItem = await response.json();
        // 更新商品数量和价格
        setItems(prevItems =>
          prevItems.map(item =>
            item.id === itemId ? { ...item, quantity: updatedItem.quantity, price: updatedItem.price } : item
          )
        );
      } else {
        console.error(`Failed to update item with ID ${itemId}`);
      }
    } catch (error) {
      console.error('Failed to update item:', error);
    }
  };

  const handleCheckboxChange = (itemId) => {
    setSelectedItems(prevSelectedItems => {
      if (prevSelectedItems.includes(itemId)) {
        return prevSelectedItems.filter(id => id !== itemId);
      } else {
        return [...prevSelectedItems, itemId];
      }
    });
  };

  const calculateSinglePrice = (itemId) => {
    const selectedItem = items.find(item => item.id === itemId);
    return selectedItem ? selectedItem.price * selectedItem.quantity : 0;
  };

  const calculateTotalPrice = () => {
    let totalPrice = 0;
    selectedItems.forEach(itemId => {
      totalPrice += calculateSinglePrice(itemId);
    });
    return totalPrice;
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Select</th>
          </tr>
        </thead>
        <tbody>
          {items.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>
                <button onClick={() => handleQuantityChange(item.id, item.quantity - 1)}>-</button>
                {item.quantity}
                <button onClick={() => handleQuantityChange(item.id, item.quantity + 1)}>+</button>
              </td>
              <td>{calculateSinglePrice(item.id)}</td>
              <td>
                <input
                  type="checkbox"
                  checked={selectedItems.includes(item.id)}
                  onChange={() => handleCheckboxChange(item.id)}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <p>Total Price: {calculateTotalPrice()}</p>
    </div>
  );
};

export default ShoppingCart;

在上述示例中,我们在handleQuantityChange函数中调用了后端API来更新商品的数量和价格。当用户点击增加或减少按钮时,我们会调用这个函数,并将新的数量传递给API。在成功更新商品信息后,我们会使用setItems方法来更新对应商品的数量和价格。

同时,我们定义了calculateSinglePrice函数来根据选中的商品以及其对应的数量来计算单个商品的价格。在calculateTotalPrice函数中,我们遍历选中的商品数组,将每个选中商品的价格累加到totalPrice变量中。

请注意,上述代码仅供参考,实际情况可能因您的数据结构和需求而有所不同。您需要根据实际情况调整代码以正确计算和显示单个商品价格和总价。文章来源地址https://www.toymoban.com/news/detail-546131.html

到了这里,关于[gtp]购物车案例参考的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于jQuery------购物车案例

    目录 基于jQuery------购物车案例 案例:购物车案例模块-增减商品数量分析 案例:购物车案例模块-修改商品小计分析  案例:购物车案例模块-计算总计和总额 案例:购物车案例模块-删除商品模块  案例:购物车案例模块-选中商品添加背景 html  js css  效果  ① 核心思路:首

    2024年02月02日
    浏览(38)
  • javascript+css+html购物车案例

    javascript代码部分主要实现三部分功能  1、商品数量增加(减少)同时小计增加(减少) 这部分主要是通过for循环给增加(减少)按钮绑定点击事件 1)点击后计数器自增(自减) 2)计数器数量*对应商品单价 赋值给对应商品小计(涉及到数据类型转换) parseInt(\\\'12ccc\\\' ) →

    2024年02月02日
    浏览(68)
  • 【Vue实战】使用vue实现购物车案例

    1. 实现步骤 【备注】这里的接口地址目前(2022年6月)还是可以用的哦~ 2. 实现 2.1 代码结构 使用的样式是Boostrap,需要npm i bootstrap,然后在main.js中引入bootstrap。 2.2 Header头部的代码 2.3 Goods商品组件代码 代码: 2.4 Footer组件代码 2.5 Counter组件代码 2.6 App.vue根组件代码 2.7 event

    2024年02月08日
    浏览(50)
  • 微信小程序实现商品加入购物车案例

    思考: 购物车中的数据保存在哪里?用哪种数据结构进行保存? 小程序中可能有多个页面需要对购物车中的数据进行操作,因此我们想到把数据存到全局中。可以使用 wx.setStorageSync() 储存,用 wx.getStorageSync() 进行获取,以数组格式方便对数据进行操作。 一、商品加入购物车

    2024年02月10日
    浏览(48)
  • [前端] 简易购物车的Hook版本

    利用所学习的React +Hook 完成一个简易的购物车效果,案例如下所示。 https://github.com/dL-hx/react18-advance 这个效果首先准备了对应的json数据,然后再去拆分组件,最后实现逻辑的部分,代码如下:

    2024年02月13日
    浏览(39)
  • 前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容

    前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13183 效果图如下: 使用方法 使用注意: 该插件需引用cc-radioBtnBox插件和cc-numbox插件两个插件库 cc-radioBtnBox插件地址:https://ext.dcloud.net

    2024年02月10日
    浏览(46)
  • Vue入门三(表单控制|购物车案例|v-model进阶|与后端交互|计算属性|监听属性|Vue生命周期)

    v-model双向数据绑定,还可以对输入框数据进行一定的限定。 v-modle 释义 lazy 等待input框的数据绑定时区焦点之后再变化 number 以数字开头并只保留后面的数字,不保留字母;字母开头都保留 trim 去除首位的空格 与后端交互统一使用json编码格式 与后端交互涉及到跨域问题后,

    2024年01月21日
    浏览(50)
  • Android商城开发----点击加入购物车,购物车商品的增删减

    上一章节:【分类页面】点击左侧类别,实现右侧对应类别商品的展示 本文是在上一章节基础上开发的,点击【分类】页面商品的加入购物车按钮,实现将商品加入购物车的功能。 本文主要实现的功能是: 1.点击加入购物车按钮,将商品加入购物车。 2.点击相同的商品加入

    2024年02月03日
    浏览(60)
  • JavaWeb购物系统(五)购物车模块的实现

    未添加商品效果图 添加商品之后的效果图 添加商品 购物车中商品的数量增加、减少、通过键盘输入改变数量 清空购物车 计算购物车商品的总价格 我们的购物车采用的是在服务端,即:使用session来存储。这样做的 缺点 :无法永久存储,当服务端关闭的时候,会销毁。 优点

    2024年02月07日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包