React从入门到精通二
React从入门到精通之购物车案例
- 1. 购物车需求说明
- 使用到的data list
- 2. 项目code
1. 购物车需求说明
- list data展示到列表中
- 每个item的通过±按钮来控制购买的数据量
- 删除按钮可以删除当前的item
- Total Price计算当前购物车的总的价格
使用到的data list
const books = [{id: 1,name: 'introduction to algorithms',date: '2006-9',price: 85.00,count: 1},{id: 2,name: 'The Art of UNIX Programming',date: '2006-2',price: 59.00,count: 1},{id: 3,name: 'Programming pearls',date: '2008-10',price: 39.00,count: 1},{id: 4,name: 'Complete code',date: '2006-3',price: 128.00,count: 1},]
2. 项目code
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>shop car demo</title><style>table {border-collapse: collapse;text-align: center;}thead {background-color: #f2f2f2;}td, th {padding: 10px 16px;border: 1px solid #aaa; }</style>
</head>
<body><div id="root"></div><!-- import react dependencies --><script src="../../lib/react.js"></script><script src="../../lib/react-dom.js"></script><script src="../../lib/babel.js"></script><!-- import data --><script src="./data.js"></script><script type="text/babel">// component Appclass App extends React.Component {constructor(){super()this.state = {books: books}}// add sumincrement(index) {const newBooks = [...this.state.books]newBooks[index].count += 1this.setState({ books: newBooks })}// reduce sum decrement(index) {const newBooks = [...this.state.books]newBooks[index].count -= 1this.setState({ books: newBooks })}/*delte item from table*/deleteItem(index) {const newBooks = [...this.state.books]newBooks.splice(index, 1)this.setState({ books: newBooks })}render(){const { books } = this.statereturn (<div><table><thead><tr><td>Order</td><td>Name</td><td>Publish Date</td><td>Price</td><td>Bought Sum</td><td>Operation</td></tr></thead><tbody>{books.map((item, index) => {return (<tr key={ item.id }><td>{ index + 1 }</td><td>{ item.name }</td><td>{ item.date }</td><td>{ '$' + item.price }</td><td><button disabled={ item.count <=1 } onClick={ () => {this.decrement(index)} }>-</button>{ item.count }<button onClick={ () => {this.increment(index)} }>+</button></td><td><button onClick={ () => {this.deleteItem(index)} }>Delete</button></td></tr>)})}</tbody></table><h2>Total Price: $ {books.reduce((preValue, item) => preValue + item.count * item.price, 0)}</h2></div>)}}// create react domconst root = ReactDOM.createRoot(document.querySelector("#root"))// dom render by reactroot.render(<App/>)</script></body>
</html>
相关文章：
React从入门到精通二
React从入门到精通之购物车案例1. 购物车需求说明使用到的data list2. 项目code1. 购物车需求说明 list data展示到列表中每个item的通过按钮来控制购买的数据量删除按钮可以删除当前的itemTotal Price计算当前购物车的总的价格 使用到的data list const books [{id: 1,name…...
【likeshop多商户】电子面单商家直播上线啦~
likeshop多商户商城v2.2.0版本更新啦！ 新增功能： 商家直播 单子面单 优化： 个人中心优惠券数量统计优化 修复： 秒杀商品待审核时，下单价格计算错误 个人中心修改头像后地址保存错误 「商家直播」 提升品牌知名度…...
游戏化销售管理是什么？使用CRM系统进行有什么用？
对于企业销售来说，高薪酬也伴随着更高的压力与挑战。高强度的单一工作会让销售人员逐渐失去对工作的兴趣，导致销售状态缺少动力和激情，工作开展愈加困难。您可以通过CRM系统进行游戏化销售管理，让销售人员重新干劲满满。 游戏并不…...
Mysql 索引（三）—— 不同索引的创建方式（主键索引、普通索引、唯一键索引）
了解了主键索引的底层原理，主键索引其实就是根据主键字段建立相关的数据结构（B树），此后在使用主键字段作为条件查询时，会直接根据主键查找B树的叶子结点。除了主键索引外，普通索引和唯一键索引也是如此&…...
秒懂算法 | 基于朴素贝叶斯算法的垃圾信息的识别
本文将带领大家亲手实现一个垃圾信息过滤的算法。 在正式讲解算法之前，最重要的是对整个任务有一个全面的认识，包括算法的输入和输出、可能会用到的技术，以及技术大致的流程。 本任务的目标是去识别一条短信是否为垃圾信息，即输入为一条文本信息，输出为二分类的分类结果。…...
SpringCloud - Feign远程调用
目录 Feign的远程调用 RestTemplate方式调用存在的问题 介绍与初步使用 Feign的自定义配置 Feign运行自定义配置来覆盖默认配置，可以修改的配置如下： 配置Feign日志有两种方式： Feign性能优化 Feign底层的客户端实现： 连…...
Eotalk Vol.03：结合 API DaaS，让使用数据更方便
Eotalk 是由 Eolink CEO 刘昊臻发起的泛技术聊天活动，每期都会邀请一些技术圈内的大牛聊聊天，聊些关于技术、创业工作、投融资等热点话题。 Eotalk 的第 3 期，很高兴邀请到 Tapdata CEO TJ 唐建法，TJ 可以说是一位超级大咖&#x…...
从零开始学习Java编程：一份详细指南
Java入门Java简介和历史Java开发环境的安装和配置Java开发工具的介绍和使用（例如Eclipse、IntelliJ IDEA等）Java语言的基本概念（例如变量、数据类型、运算符、流程控制语句等）面向对象编程基础面向对象编程概念和基本原则类和对象…...
电子技术——系统性分析反馈电压放大器
电子技术——系统性分析反馈电压放大器 在本节我们提供一个系统性的分析反馈电压放大器的方法。首先我们考虑反馈网络没有负载效应理想情况，其次我们考虑反馈网络有限阻抗下的非理想情况。总之，这种方法的思路在于，将非理想情况转换为理想情况…...
【C语言进阶】结构体、位段、枚举、以及联合（共用体）的相关原理与使用
📝个人主页：Sherry的成长之路 🏠学习社区：Sherry的成长之路（个人社区） 📖专栏链接：C语言进阶 🎯长路漫漫浩浩，万事皆有期待 文章目录1.结构体1.1 概述&a…...
《蓝桥杯每日一题》哈希·AcWing 2058. 笨拙的手指
1.题目描述每当贝茜将数字转换为一个新的进制并写下结果时，她总是将其中的某一位数字写错。例如，如果她将数字 14 转换为二进制数，那么正确的结果应为 1110，但她可能会写下 0110 或 1111。贝茜不会额外添加或删除数字，…...
Linux 定时任务调度(crontab)
一、Crontab Crontab命令用于设置周期性被执行的指令。该命令从标准输入设备读取指令，并将其存放于“crontab”文件中，以供之后读取和执行。 可以使用Crontab定时处理离线任务，比如每天凌晨2点更新数据等，经常用于系统任务调度。…...
C进阶：6.C语言文件操作
目录 1.为什么使用文件 2.什么是文件 2.1程序文件 2.2数据文件 2.3文件名 3.文件的打开和关闭 3.1文件指针 4.文件的顺序读写 fputc()写入文件 fgetc()从文件中读取 fgets()读取一段字符串 fprintf格式化写入文件、fscanf格式化读出文件 4.1对比一组函数 5.文件…...
Linux环境变量
Linux环境变量孤儿进程进程优先级其他概念环境变量感性的理解环境变量常见的环境变量添加环境变量环境变量的组织形式通过代码如何获取环境变量再次理解环境变量命令行参数孤儿进程 概念:父进程先于子进程结束，这样的子进程就叫做“孤儿进程”； “孤儿”…...
Kotlin-委托、代理和单例对象
委托和代理 实现委托和代理，使用的是by关键字。 这里设计一个场景：假设某个演员被要求唱歌，但是不会唱歌，就委托一个会唱歌的歌手在后台唱歌。 如何实现这个需求，下面就开始直接写代码 首先定义一个唱歌能力接口 int…...
华为OD机试真题Python实现【报数】真题+解题思路+代码（20222023）
报数 题目 一百个人围成一圈，每个人有一个编码编号从一开始到一百。 他们从一开始依次报数，报道M的人自动退出圈圈， 然后下一个人接着从1开始报数一直到剩余人数小于M。 请问最后剩余人在原先的编码为多少？ 🔥🔥🔥🔥🔥👉👉👉👉👉👉 华为OD机试（Py…...
MacOS：Error message “error:0308010C:digital envelope routines::unsupported“
命令行：export NODE_OPTIONS--openssl-legacy-provider 原帖：https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported...
Java 异常处理，超详细整理，适合新手入门
目录 前言 抛出异常 捕获异常 处理异常 finally块 总结 前言 当Java程序中出现错误或异常时，通常会抛出一个异常。Java的异常处理机制使得我们可以在程序运行过程中捕获这些异常并采取相应的措施，以便程序能够正常运行或者优雅地停止。 抛出异常 在…...
23年了，GOPATH和go.mod 还在冲突！
现在 新配了 go环境 设置了GOROOT，GOPATH ，发现引用别的包会出问题。一直会报 package XX not in GOROOT （xxxx）我的目录：我的开发目录： /home/fate/go_projects/老样子，下面有 /home/fate/go_…...
Could not connect to Redis at 127.0.0.1:6379: 由于目标计算机积极拒绝，无法连接。（极简解决办法）
一、遇到问题。 在需要启动Redis客户端的时候，会发现会报这个错误。报这个错误的原因就是Redis的服务端没有开启，那Redis的客户端是访问不了的 二、解决办法。 1.解决的办法就是要启动服务端，让这个客户端可以访问到。启动服务端最简单不会…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式，自动确定它们的类型。 这一特性减少了显式类型注解的需要，在保持类型安全的同时简化了代码。通过分析上下文和初始值，TypeSc…...
uniapp 小程序 学习（一）
利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 ：开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现 如下 bug 解…...
深入浅出Diffusion模型：从原理到实践的全方位教程
I. 引言：生成式AI的黎明 – Diffusion模型是什么？ 近年来，生成式人工智能（Generative AI）领域取得了爆炸性的进展，模型能够根据简单的文本提示创作出逼真的图像、连贯的文本，乃至更多令人惊叹的…...
消息队列系统设计与实践全解析
文章目录 🚀 消息队列系统设计与实践全解析🔍 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡💡 权衡决策框架 1.3 运维复杂度评估🔧 运维成本降低策略 🏗️ 二、典型架构设计2.1 分布式事务最终一致…...
五子棋测试用例
一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏，有着深厚的文化底蕴。通过将五子棋制作成网页游戏，可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家，都可以通过网页五子棋感受到东方棋类…...
ZYNQ学习记录FPGA(一)ZYNQ简介
一、知识准备 1.一些术语,缩写和概念： 1）ZYNQ全称：ZYNQ7000 All Pgrammable SoC 2）SoC:system on chips(片上系统)，对比集成电路的SoB（system on board） 3）ARM：处理器…...