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

首先，安装React和它的一些关键依赖。如果没有创建一个React项目，可以使用create-react-app创建一个。在你的终端或命令提示符中运行以下命令：

```npx create-react-app todo-app

然后进入新创建的项目目录：

```cd todo-app

然后，我们在 src 目录下创建一个新的 TodoApp.js 文件，并在其中写下以下代码：

```import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [todo, setTodo] = useState('');
  const [isEditing, setIsEditing] = useState(false);
  const [currentTodo, setCurrentTodo] = useState(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!todo) return;
    const newTodos = todos.concat({ id: Date.now(), text: todo });
    setTodos(newTodos);
    setTodo('');
  };

  const handleEdit = (todo) => {
    setTodo(todo.text);
    setIsEditing(true);
    setCurrentTodo(todo);
  };

  const handleUpdate = (event) => {
    event.preventDefault();
    if (!todo) return;
    const updatedTodos = todos.map((t) =>
      t.id === currentTodo.id ? { ...t, text: todo } : t
    );
    setTodos(updatedTodos);
    setTodo('');
    setIsEditing(false);
    setCurrentTodo(null);
  };

  const handleDelete = (id) => {
    const newTodos = todos.filter((todo) => todo.id !== id);
    setTodos(newTodos);
  };

  return (
    <div>
      <form onSubmit={isEditing ? handleUpdate : handleSubmit}>
        <input
          type="text"
          placeholder="Add todo"
          value={todo}
          onChange={(e) => setTodo(e.target.value)}
        />
        <button type="submit">{isEditing ? 'Update' : 'Add'}</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleEdit(todo)}>Edit</button>
            <button onClick={() => handleDelete(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

使用useState钩子创建了一些状态变量：
- todos是一个数组，用于存储待办事项列表。
- todo是一个字符串，表示当前输入框中输入的待办事项。
- isEditing是一个布尔值，用于确定表单当前是处于编辑模式还是添加模式。
- currentTodo是一个对象，用于存储当前选中的待办事项，在编辑时使用。
handleSubmit函数在表单提交时被调用。它阻止了默认的表单提交行为，检查todo字符串是否非空，创建一个带有唯一id和输入的文本的新待办事项对象，使用setTodos函数更新todos数组，并清空todo输入框的值。
handleEdit函数在点击某个待办事项的编辑按钮时被调用。它将todo状态设置为选中待办事项的文本，将isEditing设置为true，并将currentTodo设置为选中的待办事项。
handleUpdate函数在编辑模式下表单提交时被调用。它阻止了默认的表单提交行为，检查todo字符串是否非空，遍历todos数组以找到与currentTodo具有相同id的待办事项，使用新的todo值更新其text属性，使用setTodos函数更新todos数组，清空todo输入框的值，将isEditing设置为false，并将currentTodo设置为null。
handleDelete函数在点击某个待办事项的删除按钮时被调用。它使用filter方法过滤掉具有给定id的待办事项，并使用setTodos函数更新todos数组。
在return语句中，渲染了一个包含输入框和提交按钮的表单。根据isEditing的值，将表单的onSubmit事件设置为handleUpdate或handleSubmit。输入框的值与todo状态绑定，它的onChange事件更新todo状态为输入的值。
在表单下方，渲染了一个无序列表（<ul>）来显示待办事项列表。每个待办事项都以列表项（<li>）的形式呈现，显示其文本。它还包括一个"编辑"按钮和一个"删除"按钮，用于编辑和删除相应的待办事项。

最后，我们需要在 src/App.js 文件中使用 TodoApp 组件：

```import React from 'react';
import TodoApp from './TodoApp';

function App() {
  return (
    <div className="App">
      <TodoApp />
    </div>
  );
}

export default App;

名为App。导入了React和TodoApp组件。在组件的return语句中，它渲染了一个div元素，该元素具有className属性设置为"App"，用于样式或选择器的目的。在这个div元素内部，它渲染了一个TodoApp组件。这意味着当App组件被渲染时，它将在页面上显示TodoApp组件的内容。通过将TodoApp组件嵌套在App组件中，可以在整个应用程序中使用App组件作为顶层组件，并在其中包含其他组件。这种组件嵌套的方式使得应用程序的代码结构更具可维护性和可扩展性，因为不同的功能可以被拆分为不同的组件，并在需要时进行嵌套和组合。这段代码的最后一行，export default App;，将App组件作为默认导出，使得其他文件可以导入和使用App组件。

运行 npm start ，能在浏览器中看到一个待办事项列表，你可以在其中添加、编辑和删除待办事项。

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