【实践记录】使用React 实现待办事项｜青训营

在这篇实践记录中，我将一步一步创建一个简单的待办事项列表应用，使用React来构建界面和管理状态。将学习如何创建待办事项、编辑待办事项以及删除待办事项的功能。此外，还会为这个应用添加一些基本的样式来使其更加美观和易于使用。

准备工作

在开始之前，确保已经安装了Node.js和npm（Node.js包管理器）。在命令行中运行以下命令来检查它们是否已安装：

node -v
npm -v

如果没有安装，可以从官方网站下载并安装它们。

初始化项目

首先，我们需要创建一个新的React应用。在命令行中执行以下步骤：

创建一个新文件夹，并进入该文件夹：

mkdir todo-app
cd todo-app

使用create-react-app命令初始化一个新的React项目：

npx create-react-app .

这会在当前文件夹中创建一个新的React项目。

创建待办事项组件

我们将在React应用中创建一个名为TodoApp的组件，该组件将管理待办事项的状态，并允许用户添加、编辑和删除待办事项。在src文件夹中创建一个名为TodoApp.js的文件，并添加以下代码：

import React, { useState } from 'react';

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

}

在这段代码中，我们使用了useState钩子来创建两个状态变量：todos和inputValue。todos将存储待办事项列表，而inputValue将跟踪用户在输入框中的输入。

编写待办事项添加功能

接下来，我们将编写用于添加待办事项的功能。在TodoApp.js文件中的TodoApp组件内部继续添加以下代码：

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

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

在这段代码中，我们定义了两个函数：handleInputChange和handleAddTodo。handleInputChange函数将在输入框的值发生变化时被调用，以更新inputValue状态。handleAddTodo函数将在用户点击“Add”按钮时被调用，它会将当前输入框的值添加到待办事项列表中，并清空输入框。

编写待办事项编辑和删除功能

在TodoApp.js文件中的TodoApp组件内部，继续添加以下代码：

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

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

在这段代码中，我们定义了两个函数：handleEditTodo和handleDeleteTodo。handleEditTodo函数将根据待办事项的ID更新其文本内容。handleDeleteTodo函数将根据待办事项的ID从列表中移除它。

添加基本样式

为了美化应用，我们将添加一些基本的样式。在src文件夹中创建一个名为TodoApp.css的文件，并添加以下样式代码：

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 400px;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  margin-bottom: 20px;
}

.input-container input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

.input-container button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-left: 20px;
}

.todo-item input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.todo-item button {
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  margin-left: 10px;
  cursor: pointer;
}

这些样式将会美化应用的外观，让用户界面看起来更加现代和舒适。

到目前，我们已经完成了待办事项应用的核心功能，包括添加、编辑和删除待办事项。此外，我们还通过添加样式，使应用的外观更加美观和友好。接下来，我们将继续完善应用，可能包括一些额外的功能，例如输入验证、本地存储以及更复杂的样式。

添加输入验证

为了确保用户输入的有效性，我们可以在添加待办事项之前进行输入验证。在TodoApp.js文件的handleAddTodo函数中添加以下代码：

const handleAddTodo = () => {
  if (inputValue.trim() !== '') {
    setTodos([...todos, { id: Date.now(), text: inputValue }]);
    setInputValue('');
  } else {
    alert('请输入有效的待办事项！');
  }
};

在这段代码中，我们检查inputValue是否为空白，如果是，则弹出一个警告提示框，提示用户输入有效的待办事项。

添加本地存储功能

为了让用户的待办事项在页面刷新后仍然存在，我们可以使用浏览器的本地存储功能。在TodoApp.js文件的顶部添加以下代码：

import React, { useState, useEffect } from 'react';

然后，在TodoApp组件内部添加以下useEffect钩子：

useEffect(() => {
  const storedTodos = JSON.parse(localStorage.getItem('todos'));
  if (storedTodos) {
    setTodos(storedTodos);
  }
}, []);

在这段代码中，我们使用localStorage.getItem来获取之前存储在本地的待办事项数据。如果存在存储的数据，我们将其设置为初始的todos状态。

接下来，在handleAddTodo、handleEditTodo和handleDeleteTodo函数内部的适当位置，添加以下代码以更新本地存储：

localStorage.setItem('todos', JSON.stringify(todos));

这将在每次待办事项列表发生变化时，将最新的待办事项数据保存到本地存储中。

思考与总结

在这个实践记录中，我们从头开始构建了一个简单的待办事项列表应用。我们学习了如何使用React的useState来管理组件的状态，并实现了待办事项的添加、编辑和删除功能。通过添加基本的样式，我们使应用变得更加美观和用户友好。

我们还添加了输入验证功能，以确保用户输入的有效性。此外，通过本地存储功能，我们实现了在页面刷新后仍然保留待办事项数据的功能。

在实际应用中，我们可以继续扩展应用，例如：

添加更多样式和动画，以提升用户体验。
允许用户标记已完成的任务，以及对已完成的任务进行筛选。
实现任务的优先级和截止日期功能，以便更好地组织任务。
将数据存储到后端服务器，以便多个用户可以共享待办事项。
实现用户认证和授权，以确保只有授权用户可以访问和修改待办事项。

总之，这个实践记录是一个很好的入门教程，展示了如何使用React构建一个功能完整的应用。通过不断的学习和实践，可以进一步发展自己的React技能，并创建出更加复杂和强大的应用。

【实践记录】使用React 实现待办事项 ｜ 青训营

【实践记录】使用React 实现待办事项 ｜ 青训营

准备工作

初始化项目

创建待办事项组件

编写待办事项添加功能

编写待办事项编辑和删除功能

添加基本样式

添加输入验证

添加本地存储功能

思考与总结

【实践记录】使用React 实现待办事项｜青训营

【实践记录】使用React 实现待办事项｜青训营