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

用户8600091044165
58 阅读4分钟

使用React实现一个简单的待办事项列表

项目简介

本项目实现了一个基本的待办事项列表，用户可以在页面上添加、编辑和删除待办事项。使用了React框架来构建前端界面，并通过状态管理来处理待办事项的增、删、改操作。项目的核心功能包括：

  1. 添加待办事项：用户可以输入新的任务并将其添加到列表中。
  2. 编辑待办事项：用户可以点击待办事项进行编辑，修改任务内容。
  3. 删除待办事项：用户可以删除已完成或不再需要的任务。

技术栈

本项目使用的主要技术栈如下：

  • React：用于构建用户界面。
  • JavaScript (ES6) ：用于编写逻辑代码。
  • CSS：用于页面样式。

项目结构

项目目录结构如下：

/todo-app
  /src
    /components
      TodoList.js       // 显示待办事项列表
      TodoItem.js       // 显示单个待办事项
    App.js              // 主应用文件
    index.js            // React入口文件
  /public
    index.html          // 页面模板
  package.json          // 项目配置文件

主要功能实现

1. 添加待办事项

在App.js中，我们定义了一个用于存储待办事项的状态todos。每当用户提交一个新的待办事项时，我们会更新这个状态。代码示例如下：

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

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim()) {
      setTodos([...todos, { text: newTodo, id: Date.now(), isEditing: false }]);
      setNewTodo('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="输入待办事项"
      />
      <button onClick={handleAddTodo}>添加</button>
      <TodoList todos={todos} setTodos={setTodos} />
    </div>
  );
}

export default App;

在这个代码中，todos是一个数组，存储所有的待办事项，每个待办事项都有一个text（任务内容），id（唯一标识符）和isEditing（是否处于编辑状态）字段。handleAddTodo函数处理添加任务的逻辑。

2. 显示待办事项

TodoList.js组件负责渲染待办事项列表，并传递每个待办事项给TodoItem.js组件。代码如下：

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

const TodoList = ({ todos, setTodos }) => {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} setTodos={setTodos} />
      ))}
    </ul>
  );
};

export default TodoList;

在TodoList中，我们遍历了todos数组，并为每个待办事项渲染一个TodoItem组件。

3. 编辑和删除待办事项

TodoItem.js组件负责处理待办事项的编辑和删除操作。用户可以点击待办事项来切换编辑状态，或者删除任务。代码如下：

import React, { useState } from 'react';

const TodoItem = ({ todo, setTodos }) => {
  const [isEditing, setIsEditing] = useState(todo.isEditing);
  const [editedText, setEditedText] = useState(todo.text);

  const handleDelete = () => {
    setTodos((prevTodos) => prevTodos.filter((t) => t.id !== todo.id));
  };

  const handleSave = () => {
    if (editedText.trim()) {
      setTodos((prevTodos) =>
        prevTodos.map((t) =>
          t.id === todo.id ? { ...t, text: editedText, isEditing: false } : t
        )
      );
      setIsEditing(false);
    }
  };

  return (
    <li>
      {isEditing ? (
        <div>
          <input
            type="text"
            value={editedText}
            onChange={(e) => setEditedText(e.target.value)}
          />
          <button onClick={handleSave}>保存</button>
        </div>
      ) : (
        <span onClick={() => setIsEditing(true)}>{todo.text}</span>
      )}
      <button onClick={handleDelete}>删除</button>
    </li>
  );
};

export default TodoItem;

在TodoItem组件中，我们使用useState来管理任务是否处于编辑状态。当任务处于编辑状态时，用户可以修改输入框中的文本，并点击保存按钮更新任务。当任务处于非编辑状态时，点击任务文本会进入编辑模式。点击删除按钮时，任务会被从列表中移除。

4. 样式设计

为了使页面更美观，我们为项目添加了一些基本的CSS样式：

input[type="text"] {
  padding: 8px;
  margin: 5px;
  font-size: 16px;
}

button {
  padding: 5px 10px;
  margin: 5px;
  font-size: 14px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

li span {
  flex-grow: 1;
}

li button {
  margin-left: 10px;
}

这些样式使得待办事项列表更加简洁和易于操作。

总结

通过React，我们成功地实现了一个简单的待办事项列表。用户可以自由地添加、编辑和删除任务，且每个操作都能即时更新UI。这个项目帮助我们更好地理解了React的状态管理、事件处理以及组件的嵌套与传递数据的机制。此外，React的组件化思想让我们能够清晰地将不同的功能分开，提高了代码的可维护性。

这个待办事项应用是一个简单的示例，但它展示了React在实际开发中的强大功能和灵活性。通过扩展此项目，我们还可以加入更多功能，如任务的优先级、任务分类、拖拽排序等，让待办事项管理更加智能和便捷。

avatar
文章
阅读
粉丝