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

前言

当使用React来构建应用程序时，我们可以利用其强大的组件化和状态管理功能，轻松地实现各种功能和交互。其中一个常见的应用场景是创建一个待办事项列表，使用户能够添加、编辑和删除待办事项。我们将使用React来实现一个简单的待办事项列表。

功能简介

用户可以通过输入框添加新的待办事项，点击添加按钮将其添加到列表中。列表中的每个待办事项都有一个编辑按钮，点击该按钮可以编辑该事项的内容。此外，列表中的每个待办事项还有一个删除按钮，点击该按钮可以将其从列表中删除。

功能实现

• 创建一个新的React函数式组件，命名为TodoList。在函数组件内部，使用useState Hook来定义待办事项列表的状态和输入框的值的状态。使用useState([])来初始化待办事项列表为空数组，使用useState("")来初始化输入框的值为空字符串。

import React, { useState } from "react"; 

const TodoList = () => { 
    const [todos, setTodos] = useState([]); 
    const [newTodo, setNewTodo] = useState("");

• handleInputChange函数用来更新输入框的值，handleAddTodo函数用来添加新的待办事项到待办事项列表中。

• handleEditTodo函数用来编辑某个待办事项，它会弹出一个对话框让用户输入新的值，并更新对应的待办事项。

• handleDeleteTodo函数用来删除某个待办事项，它会根据索引将待办事项从列表中过滤掉。

  const handleInputChange = (event) => {
    setNewTodo(event.target.value);
  };

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

  const handleEditTodo = (index) => {
    const updatedTodo = prompt("Edit todo:", todos[index]);
    if (updatedTodo !== null) {
      const updatedTodos = [...todos];
      updatedTodos[index] = updatedTodo;
      setTodos(updatedTodos);
    }
  };

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

• 在渲染部分，使用input元素来显示输入框，并设置value属性为newTodo，并设置onChange事件监听器为handleInputChange函数。通过这样做，可以将输入框的值与newTodo状态关联起来。
• 在输入框后面添加一个button按钮，用于添加新的待办事项。设置onClick事件监听器为handleAddTodo函数，当点击按钮时，将会调用该函数。
• 使用ul元素和map函数来渲染待办事项列表。对于每个待办事项，将其作为li元素的内容，并为每个待办事项渲染一个编辑按钮和一个删除按钮。设置编辑按钮的onClick事件监听器为handleEditTodo函数，传递当前待办事项的索引作为参数。设置删除按钮的onClick事件监听器为handleDeleteTodo函数，同样也传递当前待办事项的索引作为参数。

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={handleInputChange}
        placeholder="Add a new todo"
      />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleEditTodo(index)}>Edit</button>
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

• 最后，导出TodoList组件作为默认模块，以便在其他地方使用。

通过按照上述步骤实现，你就可以创建一个简单的待办事项列表，用户可以添加、编辑和删除待办事项，如下图。