千峰React:案例一
做这个案例捏

因为需要用到样式,所以创建一个样式文件:
//29_实战.module.css
.active{text-decoration:line-through
}
然后创建jsx文件,修改main文件:导入Todos,写入Todos组件
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import Todos from './28_实战'createRoot(document.getElementById('root')).render(<StrictMode><Todos /></StrictMode>
)
Todos.jsx文件需要先写渲染组件的基本结构:
function Todos() {return (<div></div>)
}
export default Todos
观察案例,首先需要一个添加任务的文本框、点击添加任务的按钮、用value使用可控组件改变value值,记得加onChange:
return (<div><input type='text' value={msg} onChange={handleChange} /><button onClick={handleClick}>点击添加任务</button></div>)
改变value的值、使用Immer整合更改
const [msg, setMsg] = useState('')const [list, setList] = useImmer([])const handleChange = (e) => {setMsg(e.target.value)}const handleClick = () => {setList((draft) => {draft.unshift({ id: list.length, task: msg, checked: false })})setMsg('')}
复选框功能:
const unCompleteList = list.filter((item) => !item.checked)const completeList = list.filter((item) => item.checked)const handleChecked = (e, id) => {setList((draft) => {draft.find((item) => item.id === id).checked = e.target.checked //更改对应id的数据的复选框状态})}return(<div>{/* {未完成的列表} */}<CompleteListtitle={<h2>未完成的任务:{unCompleteList.length}个</h2>}handleChecked={handleChecked}list={unCompleteList}/>{/* {已完成的列表} */}<CompleteListtitle={<h2>已完成的任务:{completeList.length}个</h2>}list={completeList}handleChecked={handleChecked}/></div>)

列表的组件
function CompleteList({title = '',list = [],handleChecked = function () {},
}) {return (<>{title}<ul>{list.map((item) => {return (<likey={item.id}className={classNames({ [style.active]: item.checked })}><inputtype='checkbox'checked={item.checked}onChange={(e) => handleChecked(e, item.id)}/>{item.task}</li>)})}</ul></>)
}
整体的代码
import { func } from 'prop-types'
import { useState } from 'react'
import { useImmer } from 'use-immer'
import classNames from 'classnames'
import style from './29_实战.module.css'function CompleteList({title = '',list = [],handleChecked = function () {},
}) {return (<>{title}<ul>{list.map((item) => {return (<likey={item.id}className={classNames({ [style.active]: item.checked })}><inputtype='checkbox'checked={item.checked}onChange={(e) => handleChecked(e, item.id)}/>{item.task}</li>)})}</ul></>)
}function Todos() {const [msg, setMsg] = useState('')const [list, setList] = useImmer([])const unCompleteList = list.filter((item) => !item.checked)const completeList = list.filter((item) => item.checked)const handleChange = (e) => {setMsg(e.target.value)}const handleClick = () => {setList((draft) => {draft.unshift({ id: list.length, task: msg, checked: false })})setMsg('')}const handleChecked = (e, id) => {setList((draft) => {draft.find((item) => item.id === id).checked = e.target.checked //更改对应id的数据的复选框状态})}return (<div><input type='text' value={msg} onChange={handleChange} /><button onClick={handleClick}>点击添加任务</button>{/* {未完成的列表} */}<CompleteListtitle={<h2>未完成的任务:{unCompleteList.length}个</h2>}handleChecked={handleChecked}list={unCompleteList}/>{/* {已完成的列表} */}<CompleteListtitle={<h2>已完成的任务:{completeList.length}个</h2>}list={completeList}handleChecked={handleChecked}/></div>)
}
export default Todos
效果:

相关文章:
千峰React:案例一
做这个案例捏 因为需要用到样式,所以创建一个样式文件: //29_实战.module.css .active{text-decoration:line-through } 然后创建jsx文件,修改main文件:导入Todos,写入Todos组件 import { StrictMode } from react …...
部署Joplin私有云服务器postgres版-docker compose
我曾经使用过一段时间 Joplin,官方版本是收费的,而我更倾向于将数据掌握在自己手中。因此,在多次权衡后,我决定自己搭建 Joplin 服务器并进行尝试。 个人搭建的版本与数据库直连,下面是使用 Docker Compose 配置数据库…...
rust学习笔记6-数组练习704. 二分查找
上次说到rust所有权看看它和其他语言比有什么优势,就以python为例 # Python3 def test():a [1, 3, -4, 7, 9]print(a[4])b a # 所有权没有发生转移del b[4]print(a[4]) # 由于b做了删除,导致a再度访问报数组越界if __name__ __main__:test() 运行结…...
Jsmoke-一款强大的js检测工具,浏览器部署即用,使用方便且高效
目录标题 Jsmoke 🚬🚬 by Yn8rt使用方式界面预览功能特性支持的敏感信息类型 Jsmoke 🚬🚬 by Yn8rt 该插件由 Yn8rt师傅 开发,插件可以理解为主动版的hae和apifinder,因为其中的大多数规则我都引用了&a…...
PyCharm中通过命令行执行`pip`命令下载到哪里了:虚拟环境目录下
PyCharm中通过命令行执行pip命令下载到哪里了:虚拟环境目录下 在PyCharm中通过命令行执行pip命令安装工具包,包的下载位置取决于多种因素 虚拟环境 如果项目使用了虚拟环境(通常是推荐的做法): Windows:虚拟环境通常位于项目目录下的.venv文件夹(默认情况)或你指定…...
Spring Boot操作MaxComputer(保姆级教程)
目录 引言 一、引入依赖 二、配置文件 application.properties(信息用自己的奥) 三、实体类User.java 四、UserController 五、UserService 六、UserDao 七、UserDao.xml 八、postman 访问,成功查询数据 附件(修改和删除数据) 引言…...
Spring的构造注入
1.开发步骤2.构造方法的重载 2.1参数个数不同2.2构造参数个数相同时 3.注入总结 注入:通过Spring的配置文件,为成员变量赋值 Set注入:Spring调用Set方法,通过配置文件,为成员变量赋值 构造注入:Spring调用…...
服务器IPMI用户名、密码批量检查
背景 大规模服务器部署的时候,少不了较多的网管和监测平台,这些平台会去监控服务器的性能、硬件等指标参数,为了便于管理和控制,则需要给服务器IPMI带外管理添加较多的用户,这就需要对较多的服务器检查所对应的IPMI用…...
管理后台环境配置
后端配置及启动 a. 软件安装 1. Java sdk 1.8 2. maven 3.6 3. intellij IDEA 2024 4. Visual C Redistributable 5. mongodb 7.0 6. mysql 8.0 双击安装:mysql-installer-community-8.0.41.0.msi 版本选择:Full,包括服务器和客户端 …...
element-ui infiniteScroll 组件源码分享
简单分享 infiniteScroll 组件源码,主要有以下四个方面: 1、infiniteScroll 页面结构。 2、infiniteScroll 组件属性。 3、组件内部的方法。 4、存在的问题。 一、infiniteScroll 页面结构: 二、页面属性。 2.1 infinite-scroll-disab…...
Pany-v2:LFI漏洞探测与敏感文件(私钥窃取/其他)自动探测工具
地址:https://github.com/MartinxMax/pany 关于Pany-v2 Pany-v2 是一款 LFI(本地文件包含)漏洞探测工具,具备自动识别敏感文件的能力。它能够利用 LFI 漏洞检测并提取 id_rsa 私钥、系统密码文件以及其他可能导致安全风险的敏感信息。该工具…...
供应链管理系统--升鲜宝门店收银系统功能解析,登录、主界面、会员 UI 设计图(一)
供应链管理系统--升鲜宝门店收银系统功能解析,登录、主界面 会员 UI 设计图(一)...
Day11,Hot100(贪心算法)
贪心 (1)121. 买卖股票的最佳时机 第 i 天卖出的最大利润,即在前面最低价的时候买入 class Solution:def maxProfit(self, prices: List[int]) -> int:min_price prices[0]ans 0for price in prices:ans max(ans, price - min_price…...
nss刷题4
[SWPUCTF 2023 秋季新生赛]Pingpingping 看看源码,首先是get传参Ping_ip.exe,然后如果请求了_ping参数,就会执行ping命令,执行三次 <?php highlight_file(__FILE__); error_reporting(0); $_ping $_GET[Ping_ip.exe]; if(isset($_ping…...
Eclipse 编译项目指南
Eclipse 编译项目指南 引言 Eclipse 是一款功能强大的集成开发环境(IDE),广泛用于Java、C/C、Python等多种编程语言的开发。在Eclipse中编译项目是进行软件开发的基础步骤。本文将详细介绍如何在Eclipse中编译项目,包括项目设置…...
天佐.乾坤袋 基于抽屉式文件存储的NoSql数据库
天佐.乾坤袋 天佐.乾坤袋 简介 天佐.乾坤袋 基于抽屉式文件存储的NoSql数据库,可用于文件打包,数据整合,加密存放等多种用途。可以方便快捷的搭建和部署存储应用的系统。 传说: 弥勒所有,专做储物之用。拥有不可思议之力&#x…...
win11编译pytorch cuda128版本流程
Geforce 50xx系显卡最低支持cuda128,torch cu128 release版本目前还没有释放,所以自己基于2.6.0源码自己编译wheel包。 1. 前置条件 1. 使用visual studio installer 安装visual studio 2022,工作负荷选择【使用c的桌面开发】,安装完成后将…...
Windows 11 下正确安装 Docker Desktop 到 D 盘的完整教程
文章目录 Windows 11 在 D 盘正确安装 Docker Desktop 的完整教程**前言****准备工作****1. 手动创建 Docker 相关目录**(⚠️ **这一步非常重要**,否则会报错)**2. 下载 Docker Desktop 安装程序****3. 使用管理员权限打开终端** **安装 Doc…...
IDEA - 查看类的继承结构(通过快捷键查看、通过生成类图查看)
一、通过快捷键查看 在项目中定位到目标类(例如,Executor.java) 按下快捷键 【Ctrl H】 此时会弹出 Type Hierarchy 窗口,展示所有相关的父类、子类、接口 二、通过生成类图查看 在项目中定位到目标类(例如&#x…...
Vue 3指令全解析:内置指令与自定义指令实战指南
Vue指令是模板语法的核心武器,它们以v-前缀的形式为HTML元素添加特殊功能。本文将深入探讨Vue 3中的指令系统,覆盖10个核心指令的妙用,并手把手教你打造专属自定义指令。 一、Vue指令基础认知 指令本质上是DOM操作的语法糖,它们&…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 (1)输入单引号 (2)万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
2025年- H71-Lc179--39.组合总和(回溯,组合)--Java版
1.题目描述 2.思路 当前的元素可以重复使用。 (1)确定回溯算法函数的参数和返回值(一般是void类型) (2)因为是用递归实现的,所以我们要确定终止条件 (3)单层搜索逻辑 二…...
DeepSeek越强,Kimi越慌?
被DeepSeek吊打的Kimi,还有多少人在用? 去年,月之暗面创始人杨植麟别提有多风光了。90后清华学霸,国产大模型六小虎之一,手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水,单月光是投流就花费2个亿。 疯…...
C#中用于控制自定义特性(Attribute)
我们来详细解释一下 [AttributeUsage(AttributeTargets.Class, AllowMultiple false, Inherited false)] 这个 C# 属性。 在 C# 中,Attribute(特性)是一种用于向程序元素(如类、方法、属性等)添加元数据的机制。Attr…...
