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

已于 2023-08-02 17:03:03 修改
阅读量1.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端 react.js list typescript 前端框架
于 2023-07-16 08:37:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Constantiny/article/details/131745263
本文介绍了如何使用 React Hooks 和 Antd 库来创建一个功能齐全的 Todo-List 应用。通过 useState 维护任务列表状态，结合 Input 和 Checkbox 实现任务的增删及完成状态切换。通过 map 方法展示每一项任务，并为每一项提供删除功能。这是一个前端开发的基础实践，可在此基础上扩展更多功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

背景

To-do list（待办事项列表）是用来记录和管理要完成的任务、活动或项目的列表。它是一种简单而常见的工具，用于帮助人们组织和安排日常生活中的任务。每当您有一项任务需要完成或者要记住某些事情时，您可以将它添加到待办事项列表中。

学习前端的一些新知识时，经常将使用这个工具实现 Todo list 来作为入门的开发

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

思路

  1. 要实现一个 todo-list 首先想到用 useState 维护一个状态数组来保存当前 list ，还要用一个状态维护添加框中的内容
 const [todos, setTodos]
了解本专栏 订阅专栏 解锁全文 超级会员免费看
React + TypeScript + Axios + Ant Design + JSON Server 实现 TodoList 效果
debug_bug142的博客
10-02 116
我们将使用 React 来构建用户界面，TypeScript 来提供静态类型检查，Axios 来进行与后端的 HTTP 请求交互，Ant Design 来美化界面，而 JSON Server 则用于模拟后端数据。接下来，它使用 Axios 发起 POST 请求将新的待办事项发送到后端，并在成功添加后重新获取待办事项列表，并清空输入框。它接收一个待办事项的唯一标识符作为参数，并使用 Axios 发起 DELETE 请求将该待办事项从后端删除，并在成功删除后重新获取待办事项列表。在待办事项列表中，我们使用。
Redux基础+Antd完成TodoList
qq_52139998的博客
10-23 762
Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。可以帮助开发出行为稳定可预测的、运行于不同的环境（客户端、服务器、原生应用）、易于测试的应用程序。不仅于此，它还提供超爽的开发体验，比如有一个与时间旅行调试器相结合的实时代码编辑。可以将 Redux 与 React 或其他视图库一起使用。它体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态。Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。可以将 Redux 与 React 或其他视图库一起使用。
使用Antd实现TodoList页面布局
weixin_42206243的博客
07-15 765
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品 安装antd $ yarn add antd 使用方法 参考官网 https://ant.design/docs/react/introduce-cn 效果图： 4. 代码 TodoList.js import React, { Component } from 'r...
React--Redux+Antd实现TodoList
WhaleFallljf的博客
12-01 224
Redux+antd实现todoList 安装,调度流程图Redux+antd实现todoList解释定义类型 解释 先看组件，组件不直接更新，需要传递给调度员一个action，这个action中包含自己想干的事。比如，数据添加，删除。调度员只作调度这一件事，将组件传递过来的action直接给store就算完成任务。store并不会直接做什么，而是将action和自身的state一同传递给reducer，具体干什莫，reducer决定。事件处理完成后，reducer将新的状态传递给store，于此同时，s
七十八、Antd 实现 TodoList 页面布局和Redux入门
微信号：RunsenLiu
11-20 1236
2020/11/20、 周五、今天又是奋斗的一天。
Antd 将TodoList 页面美化一下
purple_lumpy的博客
03-04 742
Antd 是一个比较好的前端UI框架。 官网：https://ant.design/index-cn 在React 项目中下载，使用 yarn add 命令即可。 使用也很简单。 在组件中引用它的css 样式，然后按需引入即可。 下面贴上代码。 import React, {Component} from 'react'; import 'antd/dist/antd.css'; i...
使用 React Hooks + mock + antd构建一个完整且漂亮的 todoList
qq_41815639的博客
12-01 1340
实现效果： 搭建项目 使用 create-react-app 快速创建一个项目，删除不必要的文件，保留文件如下： 目录说明 index.js - 项目入口文件 index.less - 样式 mock.js - 模拟 todo 数据 TodoList.js - 实现的逻辑文件 在项目中引入 antd，具体方法见 在 create-react-app 中使用 antd 各部分代码展示 moc...
react-music:基于React + JavaScript的仿网易云音乐播放器，使用一行npm命令即可在本地运行前后端
05-01
技术栈: React(hooks) + axios + antd + Sass 预览 （服务器部署在 heroku，国内网络可能会比较慢） Todo 脚手架搭建 NodeJS代理解决API接口跨域问题 音乐播放器 开始/暂停 上一首 / 下一首 音量设置 循环...
重构React TODO应用：全面使用Hooks与Ant Design实现
总而言之，【标题】中提到的“todo-hooks”是一个展示现代React应用开发实践的案例，它不仅利用了React的核心特性（如Hooks和Context），而且展现了与Ant Design和Immer等库协同工作的能力。该应用还涵盖了代码质量...
React_Redux_使用Antd实现TodoList页面布局_ZHOU125disorder_
写代码的薛的博客
04-01 219
Antd antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 安装 使用 npm 或 yarn 安装# 我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 $ npm install antd --save $ yarn add antd 如果你的网络环境不佳，推荐使用 cnpm cnpm 1.引入样式： 引入Ant Design的css样式的文
React + Antd 实现一个TodoList
旧梦
02-19 577
打工人的一天，没用TodoList之前，先完成优先级高的任务，做完之后花一分钟思考下一个任务，突然间又插一个任务进来，然后又忘了下一步要干什么，弄的手忙脚乱。下班前写日报，翻聊天记录，看代码，看cr，总结自己做了什么。用了TodoList之后，首先列一个待办清单写下这一天所需要完成的工作内容，完成之后勾选一下，中间有需求插入，就再新建一个任务，有条不紊的完成一天的工作，最后再根据已完成项总结出工作成果，输出工作日报。
一个简单的todolist
纸上得来终觉浅
11-18 1641
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vue-todolist</title> <meta charset="utf-8" /> <script src="https://unpkg.com/v
20230519----重返学习-React类组件的特点及受控组件与非受控组件-TodoList使用Antd框架及React组件绑定事件
seetoyou的博客
05-20 469
类组件是动态组件，它拥有属性props上下文状态state钩子函数refs等内容。在组件内部，单纯地改动组件实例对象的状态，并不能像vue一样改变视图。在组件内部，可以基于修改状态强制更新父组件重新调用此组件等方式，让组件更新。而类组件的更新，不是重新创建一个新的实例，而是把重新执行，用最新的数据，渲染出，再经过DOM-diff，进行差异化更新。渲染第一次更新非第一次render()方法通过修改状态，可以控制组件更新页面。触发安全的钩子函数。表示是否允许更新。
reactjs+antd版的todolist实现的四种方式(二)——redux的实现
峰会路转的博客
01-22 452
这一版本的实现效果 谨遵数据交互的思路！！！！！！！！！ 入口文件 index.js import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import store from "./store"; // redux无法跨层级传递数据，这种方式局限性，不管怎样，我们先实现效果 const render = () => { consol
react如何使用Antd完成todolist
mini74的博客
03-03 445
首先需要安装antd，在控制台输入npm install antd --save即可完成安装。 进入antd design官网https://ant.design/docs/react/introduce-cn即可查询你所需要的组件 搜索自己需要的组件之后，按照以下方式即可获取。 todolist完整代码： import React,{ Component,Fragment } from 're...
antd pro学习入门笔记+todolist实例
最新发布
2301_79099606的博客
04-06 1157
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取
antd树形列表
nwsgoodstudy的博客
12-02 1172
【代码】antd树形列表。
react+antd Tree树控件（Demo可以直接运行）实现（递归生成数据）同时支持左边图标自定义也可以加自己的Logo
weixin_43207103的博客
09-06 2575
1 先上完成效果图 2 上代码（粘贴复制可以直接运行） import React, { useState } from 'react' import { Tree } from 'antd'; import { SmileOutlined, WalletOutlined, TabletOutlined } from '@ant-design/icons'; function IsTree(props) { //这是我从数据库得到的树的json数据 let d =
React+Hooks+antd Tree组件简单总结
qq_40151160的博客
03-30 2850
Tree组件一般使用于：文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 1、简单的使用（基本tree） import React, { useEffect, useState, useRef } from 'react';//首先引入hooks常用方法 import { connect } from 'react-redux'; import { Tree } from 'antd'; //引入组件 im
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zoe_ya

如果你成功申请，可以打赏杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值