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.解决的办法就是要启动服务端，让这个客户端可以访问到。启动服务端最简单不会…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
【kafka】Golang实现分布式Masscan任务调度系统
要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。 服务端程序： 从kafka消费者接收…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
PHP和Node.js哪个更爽?
先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...