在AI练中学使用React 实现一个简单的待办事项列表 | 豆包MarsCode AI刷题本文使用 React框架实现

利用AI练中学平台搭建 React 项目

1. 创建工作文件夹

在终端中输入以下命令，创建一个新的文件夹来存放待办事项项目：

cd /cloudide/workspace
mkdir todo-list

此命令的作用是：

进入工作空间目录 /cloudide/workspace。
新建一个名为 todo-list 的文件夹。

2. 下载 React 基本框架

在文件夹创建完毕后，打开刚刚新建的 todo-list 文件夹。在终端输入以下命令：

npm create-react-app todo-list

此命令会下载并搭建一个基础的 React 项目结构，包括开发所需的依赖和默认文件。

3. 实现待办事项功能

以下是待办事项应用的完整实现，包括添加、编辑和删除功能。

修改 `src/App.js` 文件

打开 src/App.js 文件，替换为以下代码：

import React, { useState } from "react";

function TodoApp() {
  const [todos, setTodos] = useState([]); // 用于存储待办事项的数组
  const [newTodo, setNewTodo] = useState(""); // 输入的新待办事项内容
  const [editingId, setEditingId] = useState(null); // 当前正在编辑的待办事项的ID
  const [editingText, setEditingText] = useState(""); // 编辑中的文本内容

  // 添加待办事项的函数
  const addTodo = () => {
    if (newTodo.trim() === "") return; // 如果输入框为空，则不添加
    setTodos([...todos, { id: Date.now(), text: newTodo }]); // 添加新待办事项
    setNewTodo(""); // 清空输入框
  };

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

  // 开始编辑待办事项的函数
  const startEditing = (id, text) => {
    setEditingId(id); // 设置当前编辑的待办事项ID
    setEditingText(text); // 设置当前编辑文本
  };

  // 保存编辑的函数
  const saveEditing = () => {
    setTodos(
      todos.map((todo) =>
        todo.id === editingId ? { ...todo, text: editingText } : todo // 更新待办事项文本
      )
    );
    setEditingId(null); // 清除编辑状态
    setEditingText(""); // 清空编辑输入框
  };

  return (
    <div style={{ width: "300px", margin: "0 auto", textAlign: "center" }}>
      <h1>待办事项</h1>
      {/* 输入框及添加按钮 */}
      <div>
        <input
          type="text"
          placeholder="请输入待办事项"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          style={{ width: "70%", padding: "5px" }}
        />
        <button onClick={addTodo} style={{ padding: "5px", marginLeft: "5px" }}>
          添加
        </button>
      </div>
      {/* 列表渲染部分 */}
      <ul style={{ listStyle: "none", padding: 0 }}>
        {todos.map((todo) => (
          <li
            key={todo.id}
            style={{
              display: "flex",
              justifyContent: "space-between",
              margin: "10px 0",
              padding: "5px",
              border: "1px solid #ddd",
              borderRadius: "5px",
            }}
          >
            {/* 判断当前待办事项是否在编辑状态 */}
            {editingId === todo.id ? (
              <input
                type="text"
                value={editingText}
                onChange={(e) => setEditingText(e.target.value)}
                style={{ width: "60%", padding: "5px" }}
              />
            ) : (
              <span>{todo.text}</span> // 非编辑状态下显示文本
            )}
            <div>
              {editingId === todo.id ? (
                <button onClick={saveEditing} style={{ marginLeft: "5px" }}>
                  保存
                </button>
              ) : (
                <button
                  onClick={() => startEditing(todo.id, todo.text)}
                  style={{ marginLeft: "5px" }}
                >
                  编辑
                </button>
              )}
              <button
                onClick={() => deleteTodo(todo.id)}
                style={{
                  marginLeft: "5px",
                  background: "red",
                  color: "white",
                  border: "none",
                }}
              >
                删除
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

功能详解

添加功能
- 用户在输入框输入待办事项的内容。
- 点击“添加”按钮后，将内容追加到 todos 列表中，并生成唯一的 id。
- 输入框内容会清空。
编辑功能
- 点击“编辑”按钮后，待办事项进入编辑状态。
- 编辑完成后点击“保存”按钮，更新内容并退出编辑模式。
删除功能
- 用户点击“删除”按钮，可将对应的待办事项从列表中移除。
简洁样式
- 利用简单的内联样式，使界面看起来清爽简洁，列表项、按钮及输入框布局合理。

运行项目

进入 todo-list 文件夹：
```
 cd todo-list
```
启动开发服务器：
```
npm start
```
打开浏览器，访问 http://localhost:3000 即可查看项目效果。

最终效果演示

运行后，用户可以通过页面完成待办事项的添加、编辑和删除操作：

输入内容后点击“添加”，新的待办事项会展示在列表中。
点击“编辑”按钮可修改内容，点击“保存”后更新列表。
点击“删除”按钮移除待办事项。

在AI练中学使用React 实现一个简单的待办事项列表 | 豆包MarsCode AI刷题