如何使用 ReactJS 创建 ToDo 应用？

---

创建 ToDo 应用是开始学习 ReactJS 的最佳方法。在本文中，我们将了解如何使用 React 构建一个简单的 ToDo 应用。该项目将涵盖 React 的关键概念，例如组件、状态管理、属性和事件处理。

待办事项列表的功能

ToDo 应用将允许用户。

• 添加新的任务。
• 将任务标记为已完成。
• 从列表中删除任务。

为了更好地管理，我们将应用程序分解成小的可重用组件，并使用 React 的useState钩子来管理状态。

先决条件

首先，您必须在系统中安装 Node.js 和 npm。然后，使用以下命令创建一个新的 React 项目。

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

项目结构

以下是 ToDo 应用的基本项目结构。

创建组件

如您在项目结构中所见，我们创建了一个目录和 3 个组件文件，这些文件将导出到 App.js 文件。

TodoForm.js

TodoForm 组件包含一个带有输入字段和提交按钮的表单。提交表单时，将调用 App.js 中的 addTask 函数，并传入任务文本。

import React, { useState } from 'react';

function TodoForm({ addTask }) {
  const [task, setTask] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (task.trim()) {
      addTask(task);
      setTask('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Add a task..."
        value={task}
        onChange={(e) => setTask(e.target.value)}
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

export default TodoForm;

TodoItem.js

此组件表示每个单独的任务，并提供标记为已完成和删除的选项。在 TodoItem.js 中，单击任务会通过调用 completeTask 函数来切换其完成状态。

import React from 'react';

function TodoItem({ task, completeTask, deleteTask }) {
  return (
    <div className={`task ${task.completed ? 'completed' : ''}`}>
      <span onClick={() => completeTask(task.id)}>{task.text}</span>
      <button onClick={() => deleteTask(task.id)}>Delete</button>
    </div>
  );
}

export default TodoItem;

TodoList.js

TodoItem.js 中的删除按钮通过调用 deleteTask 函数来删除任务。此组件遍历任务列表，并使用 TodoItem 显示每个任务。

import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ tasks, completeTask, deleteTask }) {
  return (
    <div>
      {tasks.map((task) => (
        <TodoItem
          key={task.id}
          task={task}
          completeTask={completeTask}
          deleteTask={deleteTask}
        />
      ))}
    </div>
  );
}

export default TodoList;

App.js

将所有内容整合在一起的主要组件。它管理任务的状态。

import React, { useState } from 'react';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);

  const addTask = (taskText) => {
    const newTask = { id: Date.now(), text: taskText, completed: false };
    setTasks([...tasks, newTask]);
  };

  const completeTask = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div className="App">
      <h1>ToDo App</h1>
      <TodoForm addTask={addTask} />
      <TodoList tasks={tasks} completeTask={completeTask} 
            deleteTask={deleteTask} />
    </div>
  );
}

export default App;

App.css

添加一些基本样式以使应用程序更具吸引力。

.App {
  text-align: center;
  max-width: 500px;
  margin: auto;
}

form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

input {
  width: 80%;
  padding: 10px;
  font-size: 16px;
}

button {
  padding: 10px;
  font-size: 16px;
}

.task {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.task.completed span {
  text-decoration: line-through;
}

button {
  background-color: #40a944;
  border: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

输出

因此，我们的待办事项列表可以使用了，如您所见，我们可以添加任务，将任务标记为已完成，并在任何时候我们想要删除它时删除它。