使用React实现待办事项列表应用 ｜ 青训营

随着生活节奏的加快，人们越来越需要一个有效的方式来管理日常的任务和事务。在现代技术的支持下，我们可以使用各种应用来记录和跟踪待办事项。本文将介绍如何使用React构建一个简单的待办事项列表应用，该应用允许用户添加、编辑和删除待办事项。

准备工作

在开始之前，我们需要确保已经安装了Node.js和npm（Node.js的包管理工具）。如果还没有安装，你可以从官方网站 nodejs.org/ 下载并安装。

创建React 应用

首先，打开终端并导航到你想要创建项目的文件夹中。然后运行以下命令来创建一个新的React应用：

npx create-react-app todo-app

这将会创建一个名为todo-app的文件夹，其中包含了一个基本的React应用结构。

编写组件

创建待办事项列表组件

打开位于src文件夹下的App.js文件，我们将开始编写我们的待办事项列表组件。首先，我们需要引入React：

import React, { useState } from 'react';

然后，我们可以创建一个函数式组件TodoApp，该组件将包含待办事项的状态和相关的操作：

function TodoApp() {
  const [todos, setTodos] = useState([]);
  
  return (
    <div className="todo-app">
      {/* 待办事项列表 */}
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      
      {/* 添加待办事项的表单 */}
      <form>
        <input type="text" />
        <button type="submit">添加</button>
      </form>
    </div>
  );
}

export default TodoApp;

在上面的代码中，我们使用useState钩子来管理待办事项的状态，todos数组存储了所有待办事项的内容。

添加、编辑和删除功能

我们将为每个待办事项添加编辑和删除功能。在每个列表项中，我们将显示一个编辑按钮和删除按钮，并在用户点击时执行相应的操作。

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleAddTodo = (e) => {
    e.preventDefault();
    if (inputValue) {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

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

  return (
    <div className="todo-app">
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleDeleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
      <form onSubmit={handleAddTodo}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button type="submit">添加</button>
      </form>
    </div>
  );
}

export default TodoApp;

现在，我们的待办事项列表应用已经具备了添加、编辑和删除的功能。用户可以通过文本输入框添加新的待办事项，点击每个列表项旁边的“删除”按钮来删除相应的事项。

结论

通过本文，我们学习了如何使用React构建一个简单的待办事项列表应用，该应用允许用户添加、编辑和删除待办事项。我们使用了React的状态管理功能来跟踪待办事项的数据，并通过事件处理函数实现了对应的操作。当然，这只是一个基础版本，你可以继续扩展该应用，添加更多的功能和样式，以满足实际需求。