千峰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操作的语法糖,它们&…...
FastAPI 教程:从入门到实践
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,支持 Python 3.6。它基于标准 Python 类型提示,易于学习且功能强大。以下是一个完整的 FastAPI 入门教程,涵盖从环境搭建到创建并运行一个简单的…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storms…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具:make/makfile 1.背景 在一个工程中源文件不计其数,其按类型、功能、模块分别放在若干个目录中,mak…...
机器学习的数学基础:线性模型
线性模型 线性模型的基本形式为: f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法,得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...
TCP/IP 网络编程 | 服务端 客户端的封装
设计模式 文章目录 设计模式一、socket.h 接口(interface)二、socket.cpp 实现(implementation)三、server.cpp 使用封装(main 函数)四、client.cpp 使用封装(main 函数)五、退出方法…...
接口 RESTful 中的超媒体:REST 架构的灵魂驱动
在 RESTful 架构中,** 超媒体(Hypermedia)** 是一个核心概念,它体现了 REST 的 “表述性状态转移(Representational State Transfer)” 的本质,也是区分 “真 RESTful API” 与 “伪 RESTful AP…...
