简单的待办事项列表 | 豆包MarsCode AI刷题

React 实现一个简单的待办事项列表，允许用户添加、编辑和删除待办事项，可以按照以下步骤进行：

1. 创建一个新的 React 项目
2. 定义一个待办事项数组，用来存储所有待办事项
3. 提供功能来添加新的待办事项、删除已选待办事项和编辑待办事项

1. 创建 React 项目

如果你还没有创建项目，可以使用 create-react-app 来快速启动一个 React 项目：

npx create-react-app todo-list
cd todo-list
npm start

2. 代码实现

在 src 文件夹中，修改 App.js，如下所示：

import React, { useState } from "react";
import "./App.css";

// 单个待办项组件
const TodoItem = ({ todo, onDelete, onEdit }) => {
  return (
    <div className="todo-item">
      <span>{todo.text}</span>
      <button onClick={() => onEdit(todo.id)}>编辑</button>
      <button onClick={() => onDelete(todo.id)}>删除</button>
    </div>
  );
};

function App() {
  const [todos, setTodos] = useState([]);  // 存储待办事项的数组
  const [newTodo, setNewTodo] = useState("");  // 新待办事项的输入框内容
  const [isEditing, setIsEditing] = useState(false); // 是否正在编辑
  const [editTodoId, setEditTodoId] = useState(null);  // 编辑的待办事项ID

  // 添加待办事项
  const addTodo = () => {
    if (newTodo.trim() !== "") {
      setTodos([
        ...todos,
        { id: Date.now(), text: newTodo.trim() },
      ]);
      setNewTodo(""); // 清空输入框
    }
  };

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

  // 开始编辑待办事项
  const startEdit = (id) => {
    const todoToEdit = todos.find(todo => todo.id === id);
    setNewTodo(todoToEdit.text);
    setIsEditing(true);
    setEditTodoId(id);
  };

  // 编辑待办事项
  const saveEdit = () => {
    setTodos(todos.map(todo => 
      todo.id === editTodoId ? { ...todo, text: newTodo } : todo
    ));
    setNewTodo("");
    setIsEditing(false);
    setEditTodoId(null);
  };

  return (
    <div className="App">
      <h1>待办事项列表</h1>
      <div>
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="输入新的待办事项"
        />
        <button onClick={isEditing ? saveEdit : addTodo}>
          {isEditing ? "保存编辑" : "添加待办事项"}
        </button>
      </div>

      <div>
        {todos.map(todo => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onDelete={deleteTodo}
            onEdit={startEdit}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

3. 样式文件（App.css）

可以加一些简单的 CSS 来美化界面，例如：

.App {
  font-family: Arial, sans-serif;
  width: 300px;
  margin: 50px auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

h1 {
  text-align: center;
}

input {
  width: 80%;
  padding: 5px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

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

button:hover {
  background-color: #45a049;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
}

button {
  margin-left: 10px;
}

4. 解释代码

• useState 用来管理状态：todos 存储待办事项，newTodo 存储当前输入框的内容，isEditing 用来判断是否处于编辑状态，editTodoId 存储正在编辑的待办事项的 ID。
• addTodo 添加一个新的待办事项。
• deleteTodo 删除一个待办事项。
• startEdit 用来开始编辑某个待办事项，saveEdit 用来保存编辑后的内容。
• 每个待办项都由 TodoItem 组件呈现，组件接受 onDelete 和 onEdit 作为 props 来处理删除和编辑。

5. 运行项目

现在，你可以运行 npm start 启动开发服务器，打开浏览器访问 http://localhost:3000，就可以看到待办事项列表，支持添加、删除和编辑功能。