前端基本功 用 React Hooks + Antd 实现一个 Todo-List

背景

使用 React Hooks 以及组件库 Antd 来实现一个可以 增删 标记是否完成 的 todo-list
在这里插入图片描述

思路

  1. 要实现一个 todo-list 首先想到用 useState 维护一个状态数组来保存当前 list ,还要用一个状态维护添加框中的内容
 const [todos, setTodos] = useState(initialValue);const [inputValue, setInputValue] = useState("");
  1. 然后因为是可增删,那要有一个可以增加的 Input 框和添加按钮,删除时要针对所在的那一行,所以每一个待办事项后面都有属于他自己的删除按钮,所以想到用 map 方法来实现每一行代办事项以及完成状态、改变完成状态,删除按钮的展现。
  2. 因为我们可以改变当前事项的完成状态,所以我们可以引入一个 Checkbox 标识当前行的完成状态,变为受控组件,可以改变当前行的状态,新增的 Input 框同理
 		<Inputvalue={inputValue}onChange={(e) => setInputValue(e.target.value)}onPressEnter={handleAddTodo}placeholder="输入待办事项"/><Button type="primary" onClick={handleAddTodo}>添加</Button><ul>{todos.map((todo, index) => (<li key={index} style={{ marginBottom: 15 }}><Space><Checkboxchecked={todo.completed}onChange={() => handleToggleComplete(index)}/>{todo.text}<Tag color={todo.completed ? "green" : "red"}>{todo.completed ? "已完成" : "   待办"}</Tag><Button type="dashed" onClick={() => handleDeleteTodo(index)}>删除</Button></Space></li>))}</ul>
  1. 最后写一下各种受控组件的 onChange 方法,以及按钮的 onClick 方法,大功告成
const handleAddTodo = () => {if (inputValue.trim() !== "") {setTodos([...todos, { text: inputValue, completed: false }]);setInputValue("");}};const handleDeleteTodo = (index) => {const newTodos = [...todos];newTodos.splice(index, 1);setTodos(newTodos);};const handleToggleComplete = (index) => {const newTodos = [...todos];newTodos[index].completed = !newTodos[index].completed;setTodos(newTodos);};
  1. 至此,可以进行添加,删除,改变完成状态的基本 todo-list 已经完成 ,可以在这个基础上进行其他功能的添加!在这里插入图片描述

完成代码

以上步骤所有的完整代码,点开即用

  • 链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/2627.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Excel之VLOOKUP()函数介绍

Excel之VLOOKUP()函数介绍 Excel的VLOOKUP函数语法&#xff1a; VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup]) 参数说明&#xff1a; lookup_value&#xff1a;要查找的值或要比较的值。 table_array&#xff1a;包含要在其中进行查找的数据表的区…

解决打开excel时报错 “不能使用对象链接和嵌入”

问题截图 打开excel文件或者插入对象时&#xff0c;直接弹出不能使用对象链接和嵌入报错信息。 解决方法 按 winr 组合快捷键&#xff0c;打开运行&#xff0c;输入 dcomcnfg.exe 按回车确定 此时进入到组件服务管理界面&#xff0c;依次选择 组件服务-计算机-我的电脑-DOCM…

S3C2440点亮LED(裸机开发)

文章目录 前言一、环境介绍一、GPIO介绍二、点亮开发板的LED1.预备动作2.led代码 总结 前言 本期和大家主要分享的是使用S3C2440开发板点亮一个LED灯&#xff0c;可能大家拿到开发板之后做的第一件事情都是点灯&#xff0c;这是为什么呢&#xff1f;因为点灯这件事情不仅能够检…

Linux搭建node环境-MobaXterm+node+pm2安装

1.登录session 2.安装X11-forwarding 我也不知道这个有什么用&#xff0c;但是有个叉叉在那里有点难受&#xff0c;就把它解决了什么是X11-forwarding&#xff1f;怎么使用&#xff1f; yum install xorg-x11-xauth xorg-x11-fonts-* xorg-x11-font-utils xorg-x11-fonts-Ty…

redis 和mongodb基础操作练习

目录 redis作业 string、list、hash 数据类型 举例说明list和hash的应用场景&#xff0c;每个至少一个场景 mongodb作业 1. 创建一个数据库 名字grade 2. 数据库中创建一个集合名字 class 3. 集合中插入若干数据 文档格式如下 4. 查找 5. 增加、更新、删除、统计 re…

HTTP1和HTTP2和HTTP3的区别

超文本传输协议是一个简单的请求-响应协议&#xff0c;它通常运行在TCP之上。 目录 HTTP1.1&#xff1a; HTTP2 HTTP3 参考文献 HTTP1.1&#xff1a; 特点&#xff1a; &#xff11;.一条链接只能一次请求一次返回这样子来回。一般的我们浏览器会帮我们一次次请求和收到。…

第八十八回:创建一个调色板

文章目录 概念介绍实现方法整体思路具体步骤 示例代码 我们在上一章回中介绍了打印日志相关的内容&#xff0c;本章回中将介绍 如何创建一个调色板.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在本章回中介绍的调色板是一个具有各种颜色的窗口&#xff0c…

EDM营销过时了?不,这才是跨境电商成功的最佳工具

根据最近的一项研究&#xff0c;电子邮件仍然是最具说服力的营销工具和沟通形式之一。虽然即时通讯等其他渠道正在扎根&#xff0c;但电子邮件仍然是影响最深远的商业交流形式。到2023年&#xff0c;每天发送和接收的电子邮件总数可能会超过333亿封。所以&#xff0c;如果您希望…

iOS 中支持点击网页scheme超链接打开其他app

网页内容如图所示 思路&#xff0c;点击网页中一个href 超链接的时候&#xff0c;会执行 decidePolicyForNavigationAction 方法&#xff0c;我们在改方法中截获URL&#xff0c; 判断如果是URL scheme类型的&#xff0c;则执行 [[UIApplication sharedApplication]openURL:URL…

XUbuntu22.04之vim无法复制内容到系统(一百八十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

牛客小白月赛75题解

C 豆子 构造题 由构造公式知 第n级好豆子 第n-1级坏豆子^1 所以只需要构造一个豆子结构就行 第 i 级豆子 第 i 级豆子 第 i 级豆子 第 i 级豆子 第 i 级豆子 ^ 1 第i级豆子\begin{aligned} 第i级豆子 && 第i级豆子 \\ 第i级豆子 && 第i级豆子 \verb|^| 1 …

Nginx Linux设置开机自启动

使用如下命令 vi /lib/systemd/system/nginx.service 创建并编辑文件将以下代码黏贴至此文件中 [Unit] Descriptionnginx Afternetwork.target[Service] Typeforking TimeoutSec0 #防止启动超时 Userroot Grouproot criptionnacos Afternetwork.target[Service] Typeforking T…

习题-Java网络编程

目录 1.TCP-对象 2.UDP​​​​​​​​​​​​​​ 1.TCP-对象 利用TCP传输对象信息&#xff0c;需要对对象进行实例化 User类&#xff1a; package dh09.demo02;import java.io.Serializable;public class User implements Serializable {private String name;private St…

使用Postman+JMeter进行简单的接口测试

以前每次学习接口测试都是百度&#xff0c;查看相关人员的实战经验&#xff0c;没有结合自己公司项目接口真正具体情况。 这里简单分享一下公司项目Web平台的一个查询接口&#xff0c;我会使用2种工具Postman和JMeter如何对同一个接口做调试。 准备工作 首先&#xff0c;登录公…

基于FME二开产品:NewGIS integration介绍

目录 前言 一、模板上传 二、模板在线运行 1.模板参数解析 2.模板运行 三、成果管理 总结 前言 爆肝两个月&#xff0c;我和我的团队终于打造出了一款能完美适配所有FME模板的在线模板管理平台&#xff0c;目前支持FME2021版本的所有模板的在线运行、管理。整体技术框架…

uni-app:常见组件view、text、icon

根据html&#xff1a;可知div是块级标签&#xff0c;span是行级标签 这里view类似于div&#xff0c;text类似于span&#xff0c;即 块级标签&#xff1a;view 行级标签&#xff1a;text、icon 类似效果 两个icon图标&#xff0c;置于第一排 两个view&#xff0c;分别位于第…

项目名称:无源在线词典项目

一&#xff0c;概述 基于C语言的网络电子词典项目&#xff0c;使用到了tcp协议的并发服务器设计、网络编程、文件I/O、数据库等多方面的知识。可以满足多用户同时登陆&#xff0c;用户登陆后可以查询单词及历史记录&#xff0c;具有查找快速&#xff0c;保密性好等优点。 开…

JAVA集成国密SM4

JAVA集成国密SM4加解密 一、pom配置二、代码集成2.1、目录结构2.2、源码2.3、测试 三、遇到的坑3.1、秘钥长度3.2、转码问题 四、相关链接 国密算法概述&#xff1a;https://blog.csdn.net/qq_38254635/article/details/131801527 SM4对称算法 SM4 无线局域网标准的分组数据算…

c++内存映射文件

概念 将一个文件直接映射到进程的进程空间中&#xff08;“映射”就是建立一种对应关系,这里指硬盘上文件的位置与进程逻辑地址空间中一块相同区域之间一 一对应,这种关系纯属是逻辑上的概念&#xff0c;物理上是不存在的&#xff09;&#xff0c;这样可以通过内存指针用读写内…

qt 32位编译 内存溢出 无法 运行在win7 32位

项目在 编译32位系统 内存溢出 设置成了x64 但是 最后在xp32位系统运行提示 在下载了n个dll之后发现这种状况无穷无尽&#xff0c;后来在查阅资料时发现可以直接打开qt安装目录下的“vcredist”文件夹&#xff0c;将对应位数的程序拷到win7电脑上&#xff0c;直接运行&…