使用React 实现一个简单的待办事项列表 | 豆包MarsCode AI刷题

Icried
178 阅读4分钟

React实现待办事项列表应用

在现代前端开发中，React是一个非常流行的库，常用于构建动态和交互性强的用户界面。在本教程中，我们将使用React来实现一个简单的待办事项列表（To-Do List）应用，其中用户可以添加、编辑和删除待办事项。通过构建这个小应用，我们将会涵盖一些React的基础概念，比如状态管理、事件处理和组件渲染。

步骤 1：创建React应用

首先，我们需要确保已经安装了Node.js和npm（或者使用yarn）。可以通过create-react-app工具快速初始化一个React项目。这是一个React官方推荐的脚手架工具，能够帮助你快速设置项目并运行。

npx create-react-app todo-app
cd todo-app
npm start

执行这些命令后，create-react-app会为你生成一个React应用的基本文件结构，并启动一个开发服务器。浏览器会自动打开http://localhost:3000，显示一个React的欢迎页面。

步骤 2：构建待办事项组件

我们将构建一个主要的组件，来管理待办事项的添加、编辑和删除操作。在React中，组件是构建UI的基本单元。在这个应用中，我们将创建一个App组件，用于管理待办事项的状态，并将其显示在UI上。

App.js

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

function App() {
  const [todos, setTodos] = useState([]); // 存储待办事项
  const [input, setInput] = useState("");  // 存储用户输入的待办事项

  // 添加待办事项
  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { text: input, isEditing: false }]);
      setInput("");  // 清空输入框
    }
  };

  // 删除待办事项
  const deleteTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  // 编辑待办事项
  const editTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].isEditing = true;
    setTodos(newTodos);
  };

  // 提交编辑后的待办事项
  const saveTodo = (index, newText) => {
    const newTodos = [...todos];
    newTodos[index].text = newText;
    newTodos[index].isEditing = false;
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <h1>待办事项列表</h1>
      
      <div className="todo-input">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入待办事项..."
        />
        <button onClick={addTodo}>添加</button>
      </div>

      <ul className="todo-list">
        {todos.map((todo, index) => (
          <li key={index}>
            {todo.isEditing ? (
              <input
                type="text"
                defaultValue={todo.text}
                onBlur={(e) => saveTodo(index, e.target.value)}
                onKeyPress={(e) => {
                  if (e.key === 'Enter') saveTodo(index, e.target.value);
                }}
              />
            ) : (
              <>
                <span>{todo.text}</span>
                <button onClick={() => editTodo(index)}>编辑</button>
              </>
            )}
            <button onClick={() => deleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

步骤 3：添加样式

为了使待办事项列表看起来更加美观，我们可以添加一些基本的CSS样式。你可以根据自己的需求对这些样式进行修改，下面是一些简单的样式定义：

App.css

.App {
  text-align: center;
  font-family: Arial, sans-serif;
  margin-top: 50px;
}

.todo-input {
  margin-bottom: 20px;
}

.todo-input input {
  padding: 10px;
  font-size: 16px;
  width: 300px;
  margin-right: 10px;
}

.todo-input button {
  padding: 10px 15px;
  font-size: 16px;
}

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

.todo-list li {
  background: #f1f1f1;
  margin: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo-list li button {
  background: #ff4c4c;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.todo-list li button:hover {
  background: #ff1c1c;
}

.todo-list li input {
  padding: 5px;
  font-size: 16px;
  width: 200px;
}

步骤 4：功能分析

在React中，状态（state）是一个非常重要的概念，它代表了一个组件在特定时刻的数据。在这个应用中，我们通过useState钩子来管理待办事项的状态。下面是一些关键的功能分析：

  • addTodo：当用户点击“添加”按钮时，我们会将输入框中的内容添加到todos状态中。如果输入框为空或仅包含空格，用户无法添加待办事项。
  • deleteTodo：每个待办事项旁边都有一个删除按钮，点击后会删除对应的待办事项。
  • editTodo：点击“编辑”按钮时，待办事项会进入编辑模式。此时，我们允许用户编辑该待办事项的文本。
  • saveTodo：用户完成编辑后，可以通过输入框失去焦点或者按下Enter键来保存修改。

步骤 5：启动应用

所有代码都准备好之后，运行以下命令来启动项目：

npm start

浏览器会自动打开应用，用户可以在浏览器中看到待办事项列表。通过输入框添加待办事项，并且可以对其进行编辑和删除操作。

总结与扩展

这个简单的待办事项列表应用展示了如何使用React来管理状态并处理用户交互。通过这个应用，我们可以学习到以下几点：

  1. React的组件化思想：我们将待办事项的添加、删除和编辑功能封装成了一个个小组件，这样易于管理和维护。
  2. useState钩子：useState帮助我们管理组件的状态，确保用户的交互能实时更新UI。
  3. 事件处理：通过监听用户输入和按钮点击事件，我们能够响应用户的操作，并根据操作更新状态。

未来，基于这个基础应用，我们可以进一步扩展功能，例如：

  • 将待办事项保存到本地存储（localStorage）中，保持数据的持久化。
  • 添加任务完成状态（如勾选框）来标记已完成的任务。
  • 使用后端API进行数据存储，实现多人协作和同步功能。

通过这些扩展，我们可以将这个小应用发展为一个更完整的待办事项管理工具。

avatar
文章
阅读
粉丝