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.解决的办法就是要启动服务端，让这个客户端可以访问到。启动服务端最简单不会…...
测试工程师的悲哀：我们正在成为“人肉脚本”
曾几何时，“点点点”是外界贴在测试工程师身上最刺眼的标签，我们奋力撕下它，向世界证明测试是一个需要深度技术、系统思维和工程能力的专业领域。我们学会了编程，构建了自动化框架，掌握了性能压测与安全渗透。然而&…...
2024年流浪星球比赛
2024年暑假，我去到河北参加流浪星球比赛现场人很多，调试的人排队很长，不过调试很快60分钟的时间13分钟就弄完了。拿了国一比完赛后，我又去北京爬长城，长城的确难爬，道路已有些坑坑洼洼很多人不讲文明在墙上…...
5分钟为Windows 11 24H2 LTSC恢复微软应用商店：小白也能懂的完整教程
5分钟为Windows 11 24H2 LTSC恢复微软应用商店：小白也能懂的完整教程 【免费下载链接】LTSC-Add-MicrosoftStore Add Windows Store to Windows 11 24H2 LTSC 项目地址: https://gitcode.com/gh_mirrors/ltscad/LTSC-Add-MicrosoftStore 还在为Windows 11 24…...
第7章 运算符-7.7 身份运算符
在Python中，身份运算符用于比较两个变量的内存地址引用是否相同。表7-7中列出了Python中的身份运算符, 在该表中，假设变量a的值为3，变量b的值为3。表7-7 身份运算符运算符描述实例is如果两个变量的内存地址引用相同，则返回True&am…...
效率提升神器：用快马AI自动诊断并修复npm 128错误，节省排错时间
效率提升神器：用快马AI自动诊断并修复npm 128错误，节省排错时间 最近在团队协作开发一个Node.js项目时，频繁遇到npm安装依赖报错128的问题。每次都要花大量时间排查SSH配置、网络代理或仓库源的问题，严重影响了开发效率。于是我开…...
HR 人才库管理全解：从搭建到激活的实操指南
人才是企业发展的核心资源，HR 人才库管理作为人力资源管理的重要环节，是企业沉淀、激活与复用人才资源的关键手段。传统人才管理模式下，信息分散、检索低效、资源沉睡等问题普遍存在，难以支撑企业高效招聘与长期人才储备需求。 系…...
性能引擎：G-Helper让创意工作流告别卡顿与过热
性能引擎：G-Helper让创意工作流告别卡顿与过热 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Strix, Scar, and…...
破局资源获取困境：猫抓浏览器扩展全攻略
破局资源获取困境：猫抓浏览器扩展全攻略 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在数字化时代，网络媒体资源已成为我…...
2026工控行业5大变化，对工程师意味着什么
2026工控行业5大变化，对工程师意味着什么💡 当行业在变，原地踏步就是退步。年初的时候，我和几个老朋友聊天——都是做工控十来年的"老炮儿"了。聊着聊着，大家有一个共同的感受：这行正在经历一场静…...
Win11Debloat终极指南：如何快速清理Windows系统并提升70%性能
Win11Debloat终极指南：如何快速清理Windows系统并提升70%性能 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter…...