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

想要变成代码小能手
51 阅读3分钟

本文是一个用 React 实现简单待办事项列表的示例代码。在这个示例中，我们使用函数组件和 useState 钩子来管理待办事项的状态。

请确保项目中已经安装了 React 和 React DOM。如果没有安装，可以使用以下命令进行安装：

npm install react react-dom

创建一个组件 TodoList，并在其中实现待办事项的添加、编辑和删除功能：

import React, { useState } from 'react';
​
function TodoList() {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState('');
​
  const addTodo = () => {
    if (task.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: task }]);
      setTask('');
    }
  };
​
  const editTodo = (id, newText) => {
    const updatedTodos = todos.map(todo =>
      todo.id === id ? { ...todo, text: newText } : todo
    );
    setTodos(updatedTodos);
  };
​
  const deleteTodo = id => {
    const filteredTodos = todos.filter(todo => todo.id !== id);
    setTodos(filteredTodos);
  };
​
  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input
          type="text"
          value={task}
          onChange={e => setTask(e.target.value)}
          placeholder="Enter a new task"
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="text"
              value={todo.text}
              onChange={e => editTodo(todo.id, e.target.value)}
            />
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
​
export default TodoList;

使用 useState 钩子来管理待办事项列表的状态（todos）以及新任务的输入（task）。通过输入框和按钮，用户可以添加新的待办事项，并在列表中显示。用户还可以编辑每个待办事项的文本内容，以及删除某个待办事项。

当我们谈论React时，我们实际上在讨论一种用于构建用户界面的JavaScript库。React使用组件的概念，这些组件可以被组合在一起以构建复杂的用户界面。在这个简单的待办事项列表示例中，我们将深入探讨每个部分的功能和作用。

  1. 导入所需的模块： 我们首先导入了 React 和 useState，前者是React库本身，后者是一个React提供的钩子函数，用于在函数组件中管理状态。

  2. 函数组件 TodoList 的定义： 我们创建了一个名为 TodoList 的函数组件，用于展示待办事项列表。

  3. 状态管理： 使用 useState 钩子，我们定义了两个状态变量：

    • todos: 用于存储待办事项的数组。初始值是一个空数组，每当添加、编辑或删除待办事项时，都会更新这个状态。
    • task: 用于存储新待办事项的文本输入。初始值为空字符串，每当用户在输入框中输入内容时，都会更新这个状态。

  4. 添加待办事项： addTodo 函数用于向待办事项列表中添加新任务。在用户点击“Add”按钮时触发。我们首先检查 task 是否为空，以避免添加空的任务。如果不为空，我们通过 setTodos 更新 todos 状态，并将新任务添加到数组中。

  5. 编辑待办事项： editTodo 函数用于编辑已存在的待办事项。当用户编辑某个待办事项的文本时，会触发相应的事件处理函数。我们通过遍历 todos 数组，找到匹配给定ID的待办事项，并将其文本更新为新的文本内容。

  6. 删除待办事项： deleteTodo 函数用于从待办事项列表中删除某个任务。当用户点击“Delete”按钮时触发。我们使用 filter 方法来创建一个新的待办事项数组，其中排除了与给定ID匹配的待办事项。

  7. 渲染界面： 在组件的返回部分，我们渲染了一个包含输入框、添加按钮、待办事项列表的界面。

    • 输入框：用户可以在输入框中输入新任务的文本。输入的内容通过 task 状态进行管理。
    • 添加按钮：用户点击该按钮可以添加新任务，点击后会调用 addTodo 函数。
    • 待办事项列表：使用 map 方法遍历 todos 数组，为每个待办事项创建一个列表项。列表项包含一个输入框（用于编辑文本）和一个删除按钮。通过在输入框中编辑内容，用户可以调用 editTodo 函数来更新任务的文本。点击删除按钮会调用 deleteTodo 函数来移除该任务。

通过这种方式，我们实现了一个简单的待办事项列表，允许用户添加、编辑和删除任务。React的组件化和状态管理思想使得构建交互性强的界面变得非常直观和高效。

avatar
文章
阅读
粉丝