React 实现一个简单的待办事项列表| 豆包MarsCode AI刷题

建立一个简单的待办事项列表应用

这个待办事项列表应用将允许用户添加、编辑和删除待办事项。我们将使用 React Hooks，特别是 useState 来管理状态。以下是详细的实现步骤和代码。

1. 创建 React 应用

首先，你需要确保你的开发环境已经安装了 Node.js 和 npm。通过 Create React App 创建新的项目：

npx create-react-app todo-app
cd todo-app

2. 编写应用代码

替换 src/App.js 的内容，使用以下代码：

import React, { useState } from 'react';
import './App.css'; // 引入样式文件

function App() {
    const [todos, setTodos] = useState([]); // 待办事项列表
    const [inputValue, setInputValue] = useState(''); // 新增待办事项的输入内容
    const [editIndex, setEditIndex] = useState(-1); // 当前编辑的待办事项索引
    const [editValue, setEditValue] = useState(''); // 编辑待办事项的值

    // 添加或编辑待办事项
    const handleAddOrEditTodo = () => {
        if (editIndex === -1) {
            // 添加新待办事项
            if (inputValue.trim()) { // 确保输入不为空
                setTodos([...todos, inputValue.trim()]); // 添加待办事项
                setInputValue(''); // 清空输入框
            }
        } else {
            // 编辑现有待办事项
            const newTodos = todos.map((todo, index) =>
                index === editIndex ? editValue.trim() : todo // 更新编辑的待办事项
            );
            setTodos(newTodos); // 更新待办事项列表
            setEditIndex(-1); // 重置编辑索引
            setEditValue(''); // 清空编辑值
        }
    };

    // 设置待办事项进行编辑
    const handleEdit = (index) => {
        setEditIndex(index); // 设置当前编辑索引
        setEditValue(todos[index]); // 获取待编辑的内容
    };

    // 删除待办事项
    const handleDelete = (index) => {
        const newTodos = todos.filter((_, i) => i !== index); // 过滤掉要删除的待办事项
        setTodos(newTodos); // 更新待办事项列表
    };

    return (
        <div className="container">
            <h1>待办事项列表</h1>
            <div className="input-group">
                <input
                    type="text"
                    className="todo-input"
                    value={editIndex === -1 ? inputValue : editValue} // 动态显示输入框的值
                    onChange={(e) => {
                        if (editIndex === -1) {
                            setInputValue(e.target.value); // 更新新增待办事项的值
                        } else {
                            setEditValue(e.target.value); // 更新编辑待办事项的值
                        }
                    }}
                    placeholder="添加待办事项"
                />
                <button onClick={handleAddOrEditTodo}>
                    {editIndex === -1 ? '添加' : '保存'} {/* 按钮文本动态变化 */}
                </button>
            </div>
            <ul className="todo-list">
                {todos.map((todo, index) => (
                    <li key={index} className="todo-item">
                        <span>{todo}</span>
                        <div className="button-group">
                            <button onClick={() => handleEdit(index)}>编辑</button>
                            <button onClick={() => handleDelete(index)}>删除</button>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

3. 添加样式

为了让应用程序看起来更美观，可以在 src 文件夹中创建一个 App.css 文件并添加以下样式：

.container {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    background-color: #f9f9f9;
}

h1 {
    text-align: center;
    color: #333;
}

.input-group {
    display: flex;
    justify-content: space-between;
}

.todo-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    margin-left: 10px;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.todo-list {
    list-style-type: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
    padding: 10px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.todo-item:hover {
    background-color: #f1f1f1;
}

.button-group {
    display: flex;
}

.button-group button {
    margin-left: 5px;
    background-color: #dc3545;
}

.button-group button:hover {
    background-color: #c82333;
}

4. 运行应用

在终端中运行以下命令以启动应用：

npm start

这会在浏览器中打开你的待办事项列表应用，用户可以在其中添加、编辑和删除待办事项。

5. 功能说明

• 添加待办事项：用户可以在输入框中输入待办事项，并通过点击“添加”按钮将其加入列表。
• 编辑待办事项：用户可以选择任何一个待办事项点击“编辑”按钮，输入框将显示当前待办事项内容，用户可修改后点击“保存”更新列表。
• 删除待办事项：用户可以点击“删除”按钮将待办事项从列表中移除。

6. 进一步的扩展功能

如果想让这个项目更完善，可以考虑添加以下功能：

1. 持久化数据：利用 localStorage 将待办事项保存，这样关闭网页后再打开时依旧能够看到之前添加的内容。

   代码示例：

   // 使用 useEffect 在组件挂载时加载数据
   React.useEffect(() => {
       const storedTodos = JSON.parse(localStorage.getItem('todos'));
       if (storedTodos) {
           setTodos(storedTodos);
       }
   }, []);
   
   // 每当 todos 更新时，保存到 localStorage
   React.useEffect(() => {
       localStorage.setItem('todos', JSON.stringify(todos));
   }, [todos]);
   

2. 任务完成状态：添加一个 checkbox 让用户标记待办事项是否完成，已完成的事项可以通过样式来区分。

3. 过滤待办事项：提供按钮或下拉菜单，让用户可以选择查看所有待办事项、已完成事项或未完成事项。

4. 优先级设置：允许用户为每个待办事项设定优先级，可能使用不同的颜色来指示高、中、低优先级事项。

5. 拖拽排序：引入，像 react-beautiful-dnd 或 react-dnd 这样的库，允许用户通过拖拽来改变待办事项的顺序。