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.解决的办法就是要启动服务端，让这个客户端可以访问到。启动服务端最简单不会…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...
实战三：开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。 效果图 二、实现思路 总体思路： 用户通过Gradio界面上…...
五子棋测试用例
一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏，有着深厚的文化底蕴。通过将五子棋制作成网页游戏，可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家，都可以通过网页五子棋感受到东方棋类…...