使用React实现一个简单的待办事项列表 ｜ 青训营

• 使用React实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项

组件结构

创建三个组件TodoItem、TodoList和TodoForm来构建一个简单的Todo List应用：

1. TodoItem.js： 表示一个单独的待办事项，负责显示待办事项的文本、处理编辑和删除操作。editing 和 text 状态用于控制编辑模式和文本输入

import React, { useState } from 'react';

const TodoItem = ({ todo, onDelete, onEdit }) => {
  const [editing, setEditing] = useState(false);
  const [text, setText] = useState(todo.text);

  const handleEditClick = () => {
    setEditing(true);
  };

  const handleSaveClick = () => {
    onEdit(text);
    setEditing(false);
  };

  return (
    <li>
      {editing ? (
        <>
          <input
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
          />
          <button onClick={handleSaveClick}>Save</button>
        </>
      ) : (
        <>
          <span>{todo.text}</span>
          <button onClick={handleEditClick}>Edit</button>
          <button onClick={onDelete}>Delete</button>
        </>
      )}
    </li>
  );
};

export default TodoItem;

2. TodoList.js： 负责渲染待办事项列表，接收 todos、onDelete 和 onEdit 作为属性，并遍历 todos 数组以呈现每个待办事项

3. TodoForm.js： 负责添加新的待办事项，包含一个表单输入框，用户可以在其中输入新的待办事项文本，当用户提交表单时会调用传递给它的 onAdd 函数，将新的待办事项添加到列表中

主组件

主应用组件描述了整个应用的逻辑。在App.js中，初始化了一个空的 todos 状态数组用于存储待办事项，定义addTodo、deleteTodo 和 editTodo 函数，分别用于添加、删除和编辑待办事项：

在返回的JSX中渲染了一个标题，然后嵌入TodoForm和TodoList组件，将这些组件与状态和操作连接起来。

样式

通过添加CSS或使用类似Bootstrap的样式库来美化应用

运行应用

在终端中运行npm start启动应用并在浏览器中打开，即构建出一个可以添加、删除和编辑事项的简单的Todo List