React实践｜青训营今天的主题是使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项。以下

今天的主题是使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项。以下是在下的一些见解：

首先

我们使用React来构建待办事项列表。React是一个流行的JavaScript库，用于构建用户界面。它提供了一种声明式的方式来创建可重用的UI组件，并通过使用虚拟DOM来实现高效的更新。

在我们的应用中，我们将使用React的函数组件和Hooks来实现待办事项列表。函数组件是一种简单的组件形式，它接收一些输入（称为props）并返回一个React元素。Hooks是React 16.8版本引入的新特性，它们允许我们在函数组件中使用状态和其他React功能。

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

接下来

可以在src文件夹中创建一个新的组件，命名为TodoList.js。在这个组件中，你可以定义一个状态来存储待办事项的列表，以及一些方法来添加、编辑和删除待办事项。创建一个名为TodoList的函数组件。在组件内部，我们使用useState Hook来定义两个状态：todos和newTodo。todos状态用于存储待办事项的列表，而newTodo状态用于存储用户输入的新待办事项。以下是一个简单的实现示例：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  // ...
}

然后

我们定义了三个函数来操作待办事项列表：addTodo、editTodo和deleteTodo。

1、addTodo函数用于添加新的待办事项。当用户点击添加按钮时，我们首先检查newTodo的值是否为空。如果不为空，我们使用ES6的展开运算符和setTodos函数将新待办事项添加到todos列表中，并将newTodo重置为空字符串。

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

2、editTodo函数用于编辑待办事项。当用户在待办事项的输入框中进行更改时，我们使用editTodo函数来更新todos列表中指定索引处的待办事项。我们首先创建一个副本updatedTodos，然后将新的值newValue赋给指定索引处的待办事项。最后，我们使用setTodos函数更新todos列表。

const editTodo = (index, newValue) => {
  const updatedTodos = [...todos];
  updatedTodos[index] = newValue;
  setTodos(updatedTodos);
};

3、deleteTodo函数用于删除待办事项。当用户点击删除按钮时，我们使用deleteTodo函数来过滤掉todos列表中指定索引处的待办事项。我们创建一个新的列表updatedTodos，其中排除了指定索引处的待办事项。然后，我们使用setTodos函数更新todos列表。

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

4、在组件的返回部分，我们渲染了一个包含输入框、添加按钮和待办事项列表的div元素。

return (
  <div>
    {/* 输入框和添加按钮 */}
    <input
      type="text"
      value={newTodo}
      onChange={(e) => setNewTodo(e.target.value)}
    />
    <button onClick={addTodo}>Add</button>

    {/* 待办事项列表 */}
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          {/* 待办事项的输入框和删除按钮 */}
          <input
            type="text"
            value={todo}
            onChange={(e) => editTodo(index, e.target.value)}
          />
          <button onClick={() => deleteTodo(index)}>Delete</button>
        </li>
      ))}
    </ul>
  </div>
);

在输入框中，我们将newTodo状态作为值，并在输入时更新newTodo状态。这样，用户输入的值将与newTodo状态保持同步。

在添加按钮上，我们将addTodo函数作为点击事件的处理程序。当用户点击按钮时，addTodo函数将被调用，从而触发添加新待办事项的逻辑。

在待办事项列表中，我们使用map函数遍历todos列表，并为每个待办事项渲染一个li元素。在每个li元素中，我们渲染一个输入框和一个删除按钮。输入框的值将与相应的待办事项保持同步，并在更改时触发editTodo函数。删除按钮将触发deleteTodo函数，并将相应的索引作为参数传递。

最后

可以运行应用并查看结果。在终端中运行以下命令：

npm start

这将启动开发服务器，并在浏览器中打开应用。你应该能够看到一个简单的待办事项列表，你可以添加、编辑和删除待办事项。

React实践 ｜ 青训营

首先

接下来

然后

最后

React实践｜青训营