使用React构建Todolist

鹿鸣

已于 2024-01-12 09:30:07 修改

阅读量508

点赞数 15

文章标签： react.js 前端前端框架

于 2024-01-08 19:53:43 首次发布

本文链接：https://blog.csdn.net/2302_77051183/article/details/135464714

版权

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

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

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

入门指南

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

功能详解

添加任务

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


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

任务完成状态

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


const handleTodoCheckedChange = id => {
    setTodoList(todoList.map(item => {
        if(item.id === id) {
        //如果选中的id与循环的id一致，那么他的复选框就为取反
            item.isCompleted = !item.isCompleted;
        }
        return item;
    }));
}

筛选任务

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


const handleTodosChange = type => {
    if(type === 'all') {
//选中全部任务
        setCurList(todoList);
    } else if(type === 'unfinished') {
//选中未完成的任务
        setCurList(todoList.filter(item => !item.isCompleted));
    } else {
选中已完成的任务
        setCurList(todoList.filter(item => item.isCompleted));
    }
}

编辑和删除任务

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


const handleTodoStatusChange = id => {
    setTodoList(todoList.map(item => {
        if(item.id === id) {
            item.isEdit = true;
        }
        return item;
    }));
}
 
const handleTodoEdit = (e, id) => {
    setTodoList(todoList.map(item => {
        if(item.id === id) {
            item.title = e.target.value;
        }
        return item;
    }));
}
 
const handleTodoSubmit = (e, id) => {
    if(e.keyCode === 13) {
        setTodoList(todoList.map(item => {
            if(item.id === id) {
                item.isEdit = false;
            }
            return item;
        }));
    }
}
 
const handleTodoDelete = id => {
    setTodoList(todoList.filter(item => item.id !== id));
    setCurList(curList.filter(item => item.id !== id));
}