千峰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操作的语法糖,它们&…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天,数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具,在大规模数据获取中发挥着关键作用。然而,传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时,常出现数据质…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
