用 React 打造简易待办事项列表：功能全解析用 React 打造简易待办事项列表：功能全解析在现代 web 开发领

用 React 打造简易待办事项列表：功能全解析

在现代 web 开发领域，React 以其高效、灵活且组件化的特性深受开发者喜爱。今天，我们就来利用 React 搭建一个简单却实用的待办事项列表，涵盖添加、编辑和删除功能，让日常任务管理变得轻松有序。

一、项目搭建与基础环境

首先，确保你的开发环境安装好了 Node.js 和 npm（Node 包管理器）。创建一个新的 React 项目，可以借助 create-react-app 这个便捷工具。在命令行中输入：npx create-react-app todo-list-app，稍作等待，一个基础的 React 项目结构就搭建好了。进入项目目录 cd todo-list-app，准备开启编码之旅。

二、组件设计思路

我们的待办事项列表应用主要围绕几个核心组件展开：

App 组件：作为整个应用的根组件，负责整合其他组件，把控整体状态与逻辑流向。它将持有待办事项数组，并把操作函数（添加、编辑、删除）传递给子组件。
TodoInput 组件：提供输入框与添加按钮，让用户输入新的待办事项内容，并触发添加操作，将新任务提交到父组件（App 组件）进行处理。
TodoItem 组件：针对每条待办事项进行展示，包含任务描述文本、编辑按钮和删除按钮。编辑按钮点击后可切换至编辑态，修改任务内容；删除按钮则直接移除当前任务。

三、代码实现详解

App 组件（App.js）

import React, { useState } from 'react';
import TodoInput from './TodoInput';
import TodoItem from './TodoItem';

function App() {
    // 状态管理，存储待办事项数组
    const [todos, setTodos] = useState([]);
    // 用于生成每个事项的唯一 ID
    let id = 0;

    // 添加待办事项函数
    const addTodo = (text) => {
        if (text.trim()!== '') {
            setTodos([...todos, { id: id++, text, isEditing: false }]);
        }
    };

    // 编辑待办事项函数
    const editTodo = (todoId, newText) => {
        setTodos(todos.map(todo => {
            if (todo.id === todoId) {
                return {...todo, text: newText, isEditing: false };
            }
            return todo;
        }));
    };

    // 删除待办事项函数
    const deleteTodo = (todoId) => {
        setTodos(todos.filter(todo => todo.id!== todoId));
    };

    // 切换编辑状态函数
    const toggleEdit = (todoId) => {
        setTodos(todos.map(todo => {
            if (todo.id === todoId) {
                return {...todo, isEditing:!todo.isEditing };
            }
            return todo;
        }));
    };

    return (
        <div className="App">
            <h1>待办事项列表</h1>
            <TodoInput addTodo={addTodo} />
            {todos.map(todo => (
                <TodoItem
                    key={todo.id}
                    todo={todo}
                    editTodo={editTodo}
                    deleteTodo={deleteTodo}
                    toggleEdit={toggleEdit}
                />
            ))}
        </div>
    );
}

export default App;

这里，通过 useState 钩子管理 todos 数组状态，实现添加、编辑、删除与切换编辑态的逻辑函数，并传递给子组件。

TodoInput 组件（TodoInput.js）

import React, { useState } from 'react';

function TodoInput({ addTodo }) {
    const [inputValue, setInputValue] = useState('');

    const handleInputChange = (e) => {
        setInputValue(e.target.value);
    };

    const handleAddTodo = () => {
        addTodo(inputValue);
        setInputValue('');
    };

    return (
        <div>
            <input type="text" value={inputValue} onChange={handleInputChange} placeholder="输入待办事项" />
            <button onClick={handleAddTodo}>添加</button>
        </div>
    );
}

export default TodoInput;

内部状态 inputValue 跟踪输入框内容，通过 handleAddTodo 调用父组件传来的 addTodo 函数添加新任务。

TodoItem 组件（TodoItem.js）

import React from 'react';

function TodoItem({ todo, editTodo, deleteTodo, toggleEdit }) {
    const { id, text, isEditing } = todo;
    const [editValue, setEditValue] = React.useState(text);

    const handleEditChange = (e) => {
        setEditValue(e.target.value);
    };

    const handleEditSave = () => {
        editTodo(id, editValue);
    };

    return (
        <div>
            {isEditing? (
                <div>
                    <input type="text" value={editValue} onChange={handleEditChange} />
                    <button onClick={handleEditSave}>保存</button>
                </div>
            ) : (
                <div>
                    <span>{text}</span>
                    <button onClick={() => toggleEdit(id)}>编辑</button>
                    <button onClick={() => deleteTodo(id)}>删除</button>
                </div>
            )}
        </div>
    );
}

export default TodoItem;

依据 isEditing 状态展示编辑态或常态界面，编辑态下可修改内容保存，常态下能切换编辑、执行删除。

四、样式美化与交互体验提升

为了让列表视觉更舒适、操作更流畅，添加 CSS 样式。在项目目录新建 App.css、TodoInput.css、TodoItem.css，利用 flexbox、grid 等布局技巧，设置字体、颜色、按钮样式，如让按钮悬停变色、输入框聚焦有边框特效等，提升整体美观度与交互性。

五、总结与拓展

通过以上步骤，一个基础的 React 待办事项列表就诞生了。不过，还能继续拓展，像添加任务优先级标记、设置截止日期提醒、本地存储持久化数据等功能。React 强大的组件生态与灵活的状态管理，为我们后续迭代升级提供了无限可能，鼓励大家不断探索，优化这个日常小助手。