使用React构建Todolist

本文详细介绍了如何在React中实现任务清单应用,包括添加任务、标记任务完成、筛选任务、编辑和删除功能的代码示例,展示了一个功能齐全的任务管理工具的开发过程。

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

在本博文中,我们将深入讨论如何使用React创建一个功能丰富的任务清单应用。我们将介绍添加任务、标记任务完成、根据完成状态筛选任务、编辑和删除任务等功能的实现细节。

入门指南

首先,确保您的计算机上已安装Node.js和npm。接着,运行 npx create-react-app todo-list-app 命令来创建一个新的React应用程序。创建完成后,进入项目目录并打开文件 Todolist.jsx

功能详解

添加任务

添加任务是应用的基本功能之一。当用户在输入框中键入任务内容,并按下“Enter”键时,我们将捕获用户输入的内容,并将其添加到任务列表中。

  1. const handleTodoAdd = e => {
  2. if(todo.trim() === '') {
  3. alert('任务不能为空');
  4. return false;
  5. }
  6. if(e.keyCode === 13) {//13是回车键的键值
  7. // 将任务添加到原始数据中并更新渲染列表
  8. setTodoList([{ id: todoList.length + 1, title: todo, isCompleted: false, isEdit: false }, ...todoList]);//让添加的内容往后面增加
  9. setCurList([{ id: todoList.length + 1, title: todo, isCompleted: false, isEdit: false }, ...todoList]);
  10. setTodo('');
  11. }
  12. }

任务完成状态

任务可以通过点击复选框来标记为完成或未完成。这需要通过更新任务对象的 isCompleted 属性来实现。

  1. const handleTodoCheckedChange = id => {
  2. setTodoList(todoList.map(item => {
  3. if(item.id === id) {
  4. //如果选中的id与循环的id一致,那么他的复选框就为取反
  5. item.isCompleted = !item.isCompleted;
  6. }
  7. return item;
  8. }));
  9. }

筛选任务

用户可以根据任务的完成状态进行筛选,例如查看所有任务、未完成的任务或已完成的任务。这需要对任务列表进行相应的筛选操作。

  1. const handleTodosChange = type => {
  2. if(type === 'all') {
  3. //选中全部任务
  4. setCurList(todoList);
  5. } else if(type === 'unfinished') {
  6. //选中未完成的任务
  7. setCurList(todoList.filter(item => !item.isCompleted));
  8. } else {
  9. 选中已完成的任务
  10. setCurList(todoList.filter(item => item.isCompleted));
  11. }
  12. }

编辑和删除任务

任务的编辑和删除功能使得用户能够轻松修改任务内容或从任务列表中移除任务。这包括将任务切换为可编辑状态、保存编辑后的内容以及删除特定的任务。

  1. const handleTodoStatusChange = id => {
  2. setTodoList(todoList.map(item => {
  3. if(item.id === id) {
  4. item.isEdit = true;
  5. }
  6. return item;
  7. }));
  8. }
  9. const handleTodoEdit = (e, id) => {
  10. setTodoList(todoList.map(item => {
  11. if(item.id === id) {
  12. item.title = e.target.value;
  13. }
  14. return item;
  15. }));
  16. }
  17. const handleTodoSubmit = (e, id) => {
  18. if(e.keyCode === 13) {
  19. setTodoList(todoList.map(item => {
  20. if(item.id === id) {
  21. item.isEdit = false;
  22. }
  23. return item;
  24. }));
  25. }
  26. }
  27. const handleTodoDelete = id => {
  28. setTodoList(todoList.filter(item => item.id !== id));
  29. setCurList(curList.filter(item => item.id !== id));
  30. }

结论

我详细了解了如何运用React构建一个功能丰富的任务清单应用。这里介绍了添加、完成、筛选、编辑和删除任务等核心功能的实现方法,并展示了这些功能的具体代码。通过这些功能的实现,可以创建一个强大且易于使用的任务管理工具,以帮助我们更高效地组织和完成任务。

无论是捕获用户输入,处理任务的完成状态,还是对任务进行筛选和操作,React提供了强大的工具和机制,使得开发任务清单应用变得简单而灵活。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值

举报

选择你想要举报的内容(必选)
  • 内容涉黄
  • 政治相关
  • 内容抄袭
  • 涉嫌广告
  • 内容侵权
  • 侮辱谩骂
  • 样式问题
  • 其他
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回顶部