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

xg
103 阅读4分钟

前言：我们知道React是一个用于构建用户界面的JavaScript库。它可以与其他JavaScript库和框架无缝集成，例如Redux、React Router等。它的特点是易于学习、高效、灵活、可组合和可重用。在本文中将讲述如何使用React来创建一个简单的待办事项列表，实现用户可以添加、编辑和删除待办事项 。

一、安装必要的工具和库

用React实现一个简单的待办事项列表，首先，我们需要安装必要的工具和库，即需要安装Node.js和npm。Node.js是一个JavaScript运行环境，npm是Node.js的包管理器，我们将使用它来安装React和其他依赖库。

安装完成后，我们打开终端并输入以下命令来安装其它库。

npm install react react-dom

二、 创建React应用程序

我们需要使用create-react-app工具创建一个新的React应用程序。在终端中输入以下命令：

npx create-react-app todo-list

这将创建一个名为“todo-list”的新React应用程序。

三、 编写组件代码

在src目录下创建一个名为“TodoList.js”的文件，编写TodoList组件的代码，代码如以下所示，将以下代码复制到该文件中。TodoList组件需要包含以下内容：

  • 一个输入框和一个添加按钮，用于添加待办事项
  • 一个待办事项列表，用于展示已添加的待办事项
  • 每个待办事项可以编辑和删除
 import React, { useState } from "react";

    function TodoList() {
      const [todos, setTodos] = useState([]);
      const [inputValue, setInputValue] = useState("");

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

      const handleAddTodo = () => {
        if (inputValue !== "") {
          setTodos([...todos, { id: Date.now(), text: inputValue }]);
          setInputValue("");
        }
      };

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

      const handleEditTodo = (id, newText) => {
        setTodos(
          todos.map((todo) => {
            if (todo.id === id) {
              return { ...todo, text: newText };
            }
            return todo;
          })
        );
      };

      return (
        <div>
          <input type="text" value={inputValue} onChange={handleInputChange} />
          <button onClick={handleAddTodo}>Add</button>
          <ul>
            {todos.map((todo) => (
              <li key={todo.id}>
                <input
                  type="text"
                  defaultValue={todo.text}
                  onBlur={(event) => handleEditTodo(todo.id, event.target.value)}
                />
                <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
              </li>
            ))}
          </ul>
        </div>
      );
    }
    export default TodoList;

这个代码包括一个使用React的函数组件和一些状态变量和事件处理函数。在这个代码中，我们使用了React的useState hook来管理待办事项列表和输入框的值，handleInputChange函数用于更新输入框的值。当用户输入一个新的待办事项时，我们会在handleAddTodo函数中将其添加到待办事项列表中，并清空输入框的值，如果输入框的值为空，则不会添加。当用户点击删除按钮时，我们会在handleDeleteTodo函数中从待办事项列表中删除该项，它会根据id过滤掉待删除的事项。当用户编辑一个待办事项时，我们会在输入框失去焦点时触发handleEditTodo函数来更新待办事项的文本内容，它会根据id找到待编辑的事项，并更新它的文本。

在TodoList组件的返回值中，使用input和button标签来实现输入框和添加按钮。使用ul和li标签来实现待办事项列表，每个li标签包含一个input标签和一个button标签，用于编辑和删除待办事项。在input标签中，使用value属性来显示待办事项的文本，onChange事件来更新待办事项的文本。在button标签中，使用onClick事件来触发编辑和删除操作。

四、 渲染组件

在App.js文件中，将以下代码添加到文件顶部：

import TodoList from "./TodoList";

然后，在App组件的render函数中，将以下代码添加到return语句中：

<TodoList />

这将渲染我们刚刚创建的TodoList组件。

五、结论

在终端中，进入项目目录并输入以下命令来启动应用程序：

npm start

这将启动一个本地开发服务器，并在浏览器中打开应用程序。您应该看到一个包含一个文本框、一个“Add”按钮和一个待办事项列表的页面。

这个待办事项列表还有一些不足之处，比如没有对输入进行验证、没有使用持久化存储等。但是它展示了如何使用React来创建一个简单的待办事项列表，让用户可以添加、编辑和删除待办事项。对于对输入进行验证、没有使用持久化存储等功能还需要后面努力学习尽量去完善它。

avatar
文章
阅读
粉丝