当前位置：首页 > news >正文

千峰React:案例一

news 来源：原创 2025/9/13 3:28:26

做这个案例捏

因为需要用到样式，所以创建一个样式文件：

//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 …...

编程日记 2025/9/13 3:28:26

说说JVM的底层原理(JAVA是如何运行的)？

JVM 底层原理深度解析 Java 虚拟机（JVM）是 Java 程序运行的核心环境，其设计融合了内存管理、类加载、垃圾回收和高效执行等复杂机制。以下从底层视角详细解析其核心模块，并结合实际场景说明其工作原理。一、类加载机制 1. 类加…...

编程日记 2025/9/13 3:23:34

IO 和 NIO 有什么区别？

文章目录阻塞模式与非阻塞模式数据处理方式通信模型应用场景阻塞模式与非阻塞模式 IO：是阻塞式的 IO 操作。在传统的 IO 中，当一个线程执行读操作或者写操作时，该线程会被阻塞，直到操作完成。例如，在从文件读取数据…...

编程日记 2025/9/13 3:26:49

JVM 面试

JVM 运行时内存区域划分是怎样的？ 程序计数器：记录当前线程执行的字节码指令的地址，是线程私有的。 Java 虚拟机栈：每个方法在执行时都会创建一个栈帧，用于存储局部变量表、操作数栈、动态链接、方法出口等信息&#…...

编程日记 2025/9/9 16:44:20

七、Redis集群高可用

一、节点与插槽管理添加主节点准备节点首先准备一个新的节点，添加配置文件。 vi /usr/local/redis/cluster/conf/redis-6377.conf # 放行访问IP限制 bind 0.0.0.0 # 端口 port 6377 # 后台启动 daemonize yes # 日志存储目录及日志文件名 logfile "/us…...

编程日记 2025/9/9 22:12:52

WPF12-MVVM

目录 1. 什么是MVVM2. 实现简单MVVM2.1. Part 12.2. Part 21. 什么是MVVM MVVM 是 Model-View-ViewModel 的缩写，是一种用于构建用户界面的设计模式，是一种简化用户界面的事件驱动编程方式。 MVVM 的目标是实现用户界面和业务逻辑之间的彻底分离，以便更好地管理和维护应用…...

编程日记 2025/9/11 1:26:29

多智能体博弈代码案例

多智能体博弈代码案例直接可用，我不吝啬 from openai import OpenAI import random# 定义不同人物角色的提示 CHARACTER_PROMPTS = {"专家": "你是该领域的权威专家，知识渊博，回答严谨专业。"...

编程日记 2025/9/11 5:02:50

【AHK】资源管理器自动化办公实例/自动连点设置

此处为一个自动连续点击打开检查的自动化操作案例，没有quicker的鼠键录制，不常用了，做个备份 #MaxThreadsPerHotkey 2 ; 这个是核心！！！！确保可以同时运行多个热键或标签global isRunning : tru…...

编程日记 2025/9/4 20:20:26

Python安装环境变量

1、确保已经安装python到电脑上 2、到系统上环境变量位置 3、新建系统变量，变量名为PYTHON_HOME，变量值为python安装目录 4、点击系统变量的path，并新建环境变量 5、测试 ，windowsR,并输入cmd，尝试命令python --ver…...

编程日记 2025/9/11 2:28:47

Flink同步数据mysql到doris问题合集

Flink同步数据mysql到doris 官方同步流程Doris安装下载地址导入镜像启动配置 Flink-cdc安装（自制）下载地址导入镜像启动命令启动问题修复Flink报错Could not acquire the minimum required resources.作业报错 Mysql8.0 Public Key Retrieval is not al…...

编程日记 2025/9/11 20:17:33

Pytest测试用例执行跳过的3种方式

文章目录 1.前言2.使用 pytest.mark.skip 标记无条件跳过3.使用 pytest.mark.skipif 标记根据条件跳过4. 执行pytest.skip()方法跳过测试用例 1.前言在实际场景中，我们可能某条测试用例没写完，代码执行时会报错，或者是在一些条件下不让某些…...

编程日记 2025/9/9 10:31:41

spring boot 连接FTP实现文件上传

spring boot　连接FTP实现文件上传 maven： <dependency><groupId>commons-net</groupId><artifactId>commons-net</artifactId><version>3.8.0</version></dependency>接口示例： ApiO…...

编程日记 2025/9/13 0:40:01

深入解析/etc/hosts.allow与 /etc/hosts.deny：灵活控制 Linux 网络访问权限

文章目录深入解析/etc/hosts.allow与 /etc/hosts.deny：灵活控制 Linux 网络访问权限引言什么是 TCP Wrappers？工作原理什么是 /etc/hosts.allow 和 /etc/hosts.deny？匹配规则配置语法详解配置示例允许特定 IP 访问 SSH 服务拒绝整个子网访问…...

编程日记 2025/9/13 1:42:54

短跑怎么训练提高最快·棒球1号位

棒球运动员的短跑能力直接影响跑垒、防守和进攻效率，提升短跑速度需结合专项需求（如爆发力、加速度、变向能力）进行系统训练。以下为针对性训练方案： 一、专项爆发力训练（提升起跑速度） 抗阻冲刺用弹力带…...

编程日记 2025/9/9 11:39:46

USRP7440-通用软件无线电平台

1、产品描述 USRP7440基于第三代XILINX Zynq UltraScale RFSoC架构，它将射频ADC、DAC、ARM、FPGA等集成一体，瞬时带宽可以达到2.5GHz，尤其适合于射频直采应用，比如通信与雷达。第一代RFSOC高达4GHz • 8x 或 16x 6.554GSPS DAC…...

编程日记 2025/9/11 22:41:37

51c大模型~合集48

我自己的原文哦~ https://blog.51cto.com/whaosoft/11940475 #Mini-Omni 让大模型能听会说，国内机构开源全球首个端到端语音对话模型本文出自启元世界多模态算法组，共同一作是来自清华大学的一年级硕士生谢之非与启元世界多模态负责人吴昌桥&…...

编程日记 2025/9/6 22:16:15

004-利用Docker安装Mysql

利用Docker安装Mysql 一、在镜像仓库找到 Mysql1.镜像仓库地址2.复制命令3.下载Mysql镜像4.查看镜像二、创建实例并启动三、用本地工具连接数据库四、设置 Mysql 配置一、在镜像仓库找到 Mysql 1.镜像仓库地址 https://hub.docker.com 2.复制命令 docker pull mysql:8.0…...

编程日记 2025/9/9 4:02:20

Web自动化之Selenium添加网站Cookies实现免登录

在使用Selenium进行Web自动化时，添加网站Cookies是实现免登录的一种高效方法。通过模拟浏览器行为，我们可以将已登录状态的Cookies存储起来，并在下次自动化测试或爬虫任务中直接加载这些Cookies，从而跳过登录步骤。 Cookies简介 …...

编程日记 2025/9/8 19:20:39

UEditor集成Markdown编辑功能方案

分步解决方案： 1. 推荐免费开源Markdown库推荐使用 markdown-it（MIT协议） 官网：https://github.com/markdown-it/markdown-it 特点：轻量级（15KB）、扩展性强、支持CommonMark规范、中文文档丰…...

编程日记 2025/9/11 10:13:37

综合练习 —— 递归、搜索与回溯算法

目录一、1863. 找出所有子集的异或总和再求和 - 力扣（LeetCode） 算法代码： 代码思路问题分析核心思想实现细节代码解析初始化 DFS 函数时间复杂度空间复杂度示例运行输入运行过程总结二、 47. 全排列 II - 力扣&a…...

编程日记 2025/9/11 20:01:49

Python之使用动态导包优化软件加载速度

在开发大型 Python 软件时，可能会遇到以下问题：由于静态导入了大量模块，导致软件启动时间过长，用户体验不佳。例如，一个复杂的桌面应用程序或 Web 服务可能依赖于多个大型库（如 numpy、pandas、torch 或 Yolo），这些库在启动时被静态导入，即使某些功能模块在启动时并不…...

编程日记 2025/9/7 15:17:48

第16天：C++多线程完全指南 - 从基础到现代并发编程

第16天：C多线程完全指南 - 从基础到现代并发编程一、多线程基础概念 1. 线程创建与管理（C11） #include <iostream> #include <thread>void hello() {std::cout << "Hello from thread " << std::this_…...

编程日记 2025/9/12 11:26:38

建筑兔零基础人工智能自学记录33|基础知识1

插入学习一下一些基础概念： 1、基本概念人工智能：让机器像人一样思考。机器学习ML：计算机获取知识的过程。深度学习：机器的一种思考方式（借助神经网络）。三者关系 2、机器学习的方式监督学习&#x…...

编程日记 2025/9/11 9:10:41

win11编译pytorchaudio cuda128版本流程

1. 前置条件本篇续接自 win11编译pytorch cuda128版本流程，阅读前请先参考上一篇配置环境。访问https://kkgithub.com/pytorch/audio/archive/refs/tags/v2.6.0.tar.gz下载源码，下载后解压； 2. 编译在visual studio 2022安装目录下查找…...

编程日记 2025/9/9 14:39:53

Python—Excel全字段转json文件(极速版+GUI界面打包)

目录专栏导读1、背景介绍2、库的安装3、核心代码4、完整代码(简易版)5、进阶版(GUI)总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手 🏳️‍🌈 博客主页：请点击——> 一晌小贪欢的博客主页求关注 👍 该系列文章专栏：请点击——…...

编程日记 2025/9/12 9:28:31

NLP学习记录十一：位置编码

目录一、位置编码的意义二、位置编码方法三、代码实现一、位置编码的意义在标准的注意力机制中，每个查询都会关注所有的键－值对并生成一个注意力输出，模型并没有考虑到输入序列每个token的顺序关系。以["我&qu…...

编程日记 2025/9/11 6:36:27

算法之算法主题

程序员数学《程序员数学 v2.0》 | 小傅哥 bugstack 虫洞栈智力题头脑风暴题目 | Java 全栈知识体系...

编程日记 2025/9/11 12:35:51

【三维分割】LangSplat: 3D Language Gaussian Splatting（CVPR 2024 highlight）

论文：https://arxiv.org/pdf/2312.16084 代码：https://github.com/minghanqin/LangSplat 文章目录一、3D language field二、回顾 Language Fields的挑战三、使用SAM学习层次结构语义四、Language Fields 的 3DGS五、开放词汇查询（Open-voca…...

编程日记 2025/9/11 9:10:26

Wireshark：自定义类型帧解析

文章目录 1. 前言2. 背景3. 开发 Lua 插件 1. 前言限于作者能力水平，本文可能存在谬误，因此而给读者带来的损失，作者不做任何承诺。 2. 背景 Wireshark 不认识用 tcpdump 抓取的数据帧，仔细分析相关代码和数据帧后&#xff0c…...

编程日记 2025/9/12 9:41:27

ES6 特性全面解析与应用实践

1、let let 关键字用来声明变量，使用let 声明的变量有几个特点： 1) 不允许重复声明 2) 块儿级作用域 3) 不存在变量提升 4) 不影响作用域链 5) 暂时性死区 6）不与顶级对象挂钩在代码块内，使用let命令声明变量之前&#x…...

编程日记 2025/9/10 21:16:16

Qt跨线程信号槽调用：为什么信号不能像普通函数那样调用

1. 信号与槽机制的基本原理在 Qt 中，信号与槽机制是一种事件驱动的通信方式，用于对象之间的解耦交互。其关键特点如下： 信号不能直接调用信号只是一个声明，并没有实际的函数实现。它们通过 emit 关键字在对象内部被触发&…...

编程日记 2025/9/10 1:43:00

Zookeeper（79）如何进行Zookeeper的监控？

对 Zookeeper 进行监控是确保其高可用性和性能的关键步骤。监控 Zookeeper 通常包括以下几个方面： 健康检查：检查 Zookeeper 节点是否在线。性能指标：监控关键性能指标，如请求延迟、事务处理量等。日志监控：监控 Zook…...

编程日记 2025/9/13 1:42:59

【江科大STM32】TIM输出比较-PWM功能（学习笔记）

一、PWM驱动LED呼吸灯接线图： PWM的初始化: 具体步骤： ①RCC开启时钟（把要用的TIM外设和GPIO外设时钟都打开） ② 配置时基单元，包括前面的时钟源选择 ③配置输出比较单元，里面包括CCR的值&#xff…...

编程日记 2025/9/9 10:01:18

playbin之autoplug_factories源码剖析

一、autoplug_factories_cb /* Called when we must provide a list of factories to plug to pad with caps.* We first check if we have a sink that can handle the format and if we do, we* return NULL, to expose the pad. If we have no sink (or the sink does not…...

编程日记 2025/9/9 0:31:52

相关文章：