使用React构建Todolist

在本博文中，我们将深入讨论如何使用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));
}

结论

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

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