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.解决的办法就是要启动服务端，让这个客户端可以访问到。启动服务端最简单不会…...
身份证OCR识别接口接入实战：Python/Java/PHP/C#四语言代码示例与踩坑指南
#身份证OCR, #OCR接口, #API接入, #Python示例, #Java示例, #PHP示例, #踩坑指南, #石榴智能, #实名认证, #图片识别 身份证OCR识别接口接入实战：Python/Java/PHP/C#四语言代码示例与踩坑指南 作者：石榴智能技术团队 一、前言 身份证OCR识别已经不是什…...
高性能Windows流媒体服务器部署：5大核心技术与3种实战架构深度解析
高性能Windows流媒体服务器部署：5大核心技术与3种实战架构深度解析 【免费下载链接】srs-windows 项目地址: https://gitcode.com/gh_mirrors/sr/srs-windows 在Windows平台上构建专业级流媒体服务系统，需要综合考虑协议兼容性、性能优化和部署架…...
雪球网md5__1038参数逆向解析与Node.js复现
1. 这不是“破解”，而是对前端加密逻辑的常规逆向还原你打开雪球网任意一只股票详情页，F12 打开开发者工具，切到 Network 面板，刷新页面——很快就能在 XHR 请求里捕获到类似这样的接口：https://xueqiu.com/stock/cube…...
3步深度解锁：网络设备权限管理工具的实战手册
3步深度解锁：网络设备权限管理工具的实战手册 【免费下载链接】zteOnu A tool that can open ZTE onu device factory mode 项目地址: https://gitcode.com/gh_mirrors/zt/zteOnu 你是否曾面对功能受限的网络设备感到束手无策？当默认配置锁死了硬…...
告别SVN恐惧症：美术策划也能轻松上手的Unity PlasticSCM极简入门（附团队项目拉取实战）
告别SVN恐惧症：美术策划也能轻松上手的Unity PlasticSCM极简入门（附团队项目拉取实战） 在游戏开发团队中，版本控制系统是协作的基石，但传统工具如SVN往往让非技术成员望而生畏。当美术资源频繁更新、策划案不断迭代时&…...
多模型聚合平台如何助力网站AIB测试与选型
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 多模型聚合平台如何助力网站AIB测试与选型 对于网站产品经理而言，首页文案的生成质量直接影响用户的第一印象和转化率。…...
JS中forEach与普通for
for就不用说了，最普通的循环函数forEach1. 只写 1 个参数只接收当前遍历元素let arr [10,20,30] arr.forEach(item > {console.log(item) // 依次 10、20、30 })2. 写 2 个参数依次接收元素值、下标索引let arr [10,20,30] arr.forEach((item, index) > {co…...
京东自动购物终极指南：告别缺货烦恼，智能抢购神器
京东自动购物终极指南：告别缺货烦恼，智能抢购神器 【免费下载链接】Jd-Auto-Shopping 京东商品补货监控及自动下单 项目地址: https://gitcode.com/gh_mirrors/jd/Jd-Auto-Shopping 还在为心仪商品瞬间售罄而苦恼吗？还在熬夜等待补货却…...
模式分层预测驱动推断：处理复杂缺失数据的统计新框架
1. 项目概述：当数据“缺胳膊少腿”时，如何做出靠谱的推断？在数据科学和统计建模的日常工作中，我们最怕遇到什么？不是复杂的算法，也不是海量的数据，而是数据本身“缺胳膊少腿”——也就是缺失值。…...
白嫖Codex！一行代码不花接入国产DeepSeek-v4-pro，从此告别ChatGPT月费
Codex 如何接入国产模型 DeepSeek-v4-pro 保姆级教程 使用 Claude Code、Codex 已经好几个月了，不得不感叹现在的 AI 工具真的太强大了。目前市面上很多 Claude Code 如何接入大模型的教程，但 Codex 却比较少，一方面因为 Codex 需要 ChatGPT …...