代码：

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

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');
  const [editingIndex, setEditingIndex] = useState(null);

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, { text: newTodo, completed: false }]);
      setNewTodo('');
    }
  };

  const editTodo = (index) => {
    setEditingIndex(index);
    setNewTodo(todos[index].text);
  };

  const updateTodo = () => {
    if (newTodo.trim() !== '') {
      const updatedTodos = [...todos];
      updatedTodos[editingIndex].text = newTodo;
      setTodos(updatedTodos);
      setNewTodo('');
      setEditingIndex(null);
    }
  };

  const deleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <div>
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
        />
        {editingIndex !== null ? (
          <button onClick={updateTodo}>Update</button>
        ) : (
          <button onClick={addTodo}>Add</button>
        )}
      </div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo.text}
            <button onClick={() => editTodo(index)}>Edit</button>
            <button onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;
`

代码组成：

状态管理和初始化：使用React的useState钩子创建状态。todos是一个数组，用于存储待办事项对象。newTodo是一个字符串，用于跟踪用户在输入框中输入的新待办事项。editingIndex是一个数字，表示当前正在编辑的待办事项的索引。初始值都是空或null。

添加新待办事项：editTodo函数在点击"Edit"按钮时被调用，它接收待办事项的索引作为参数。它设置editingIndex以指示正在编辑的待办事项，并将待办事项的文本设置为newTodo，以便用户可以在输入框中编辑。

更新待办事项：updateTodo函数在点击"Update"按钮时被调用。它会检查newTodo是否为空，然后更新todos数组中指定索引的待办事项的文本。随后，它会重置newTodo和editingIndex，以便用户可以继续添加新的待办事项。

删除待办事项：deleteTodo函数在点击"Delete"按钮时被调用，它接收待办事项的索引作为参数。它使用filter方法创建一个新的todos数组，其中不包含被删除的待办事项。然后，它将新的todos数组设置为状态，从而实现删除功能。

渲染待办事项列表：在return语句中，我们使用map方法遍历todos数组，并为每个待办事项渲染一个列表项。每个列表项都包括待办事项的文本，以及"Edit"和"Delete"按钮，点击这些按钮将调用相应的函数来编辑或删除待办事项。

使用的React特性：

函数组件：整个应用的主要结构是一个函数组件，即App组件。这是React中常用的一种组件类型，用于构建用户界面。
状态管理：useState钩子：使用useState钩子来创建和管理组件内部的状态。通过在函数组件中调用useState，可以跟踪并更新状态，例如待办事项列表、新待办事项和正在编辑的待办事项的索引。
条件渲染：使用条件语句来根据编辑状态（editingIndex是否为null）来确定是渲染“Add”按钮还是“Update”按钮。这是React中的一种常见的条件渲染模式。
循环渲染：使用map方法来遍历todos数组，并为每个待办事项渲染一个列表项。这是一种常见的循环渲染模式，它允许我们基于数组的内容来生成界面元素。
事件处理：通过在按钮上绑定onClick事件处理函数来处理用户的点击操作。这些事件处理函数会触发状态更新，从而实现添加、编辑和删除待办事项。
状态更新和传递：使用setTodos和其他set函数来更新状态。当状态更新时，React会重新渲染组件，以反映新的状态值。
受控组件：输入框的值是由newTodo状态控制的。这被称为受控组件，因为React控制了输入框的值，而不是由DOM自己管理。
组件通信：在函数组件中，使用了函数参数（例如index）来进行组件之间的通信，以便在编辑和删除待办事项时准确地操作相应的项目。

React 实现简单的待办事项列表|青训营

代码：

代码组成：

使用的React特性：