实验记录：使用 React 实现待办事项列表

步骤 1：创建 React 应用

首先，我们需要创建一个新的 React 应用。可以使用 Create React App 工具来快速搭建一个基本的 React 项目。

npx create-react-app todo-list
cd todo-list
复制代码

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

在目录下创建一个名为的文件，并编写以下代码：src``TodoItem.js

import React from 'react';

const TodoItem = ({ todo, onDelete, onEdit }) => {
  const handleDelete = () => {
    onDelete(todo.id);
  };

  const handleEdit = () => {
    const newTitle = prompt('Enter new title:', todo.title);
    if (newTitle) {
      onEdit(todo.id, newTitle);
    }
  };

  return (
    <div>
      <span>{todo.title}</span>
      <button onClick={handleEdit}>Edit</button>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
};

export default TodoItem;
复制代码

在上述代码中，我们定义了一个名为的函数组件。它接受、和作为 props。是一个待办事项对象，包含和属性。和是回调函数，用于处理删除和编辑操作。TodoItem``todo``onDelete``onEdit``todo``id``title``onDelete``onEdit

在组件的渲染部分，我们展示了待办事项的标题，并提供了编辑和删除按钮。当用户点击编辑按钮时，会弹出一个对话框，允许用户输入新的标题。用户点击删除按钮时，会触发回调函数。onDelete

步骤 3：创建待办事项列表组件

在目录下创建一个名为的文件，并编写以下代码：src``TodoList.js

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

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo) {
      const todo = {
        id: Date.now(),
        title: newTodo,
      };
      setTodos([...todos, todo]);
      setNewTodo('');
    }
  };

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

  const handleEditTodo = (id, newTitle) => {
    const updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        return { ...todo, title: newTitle };
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add</button>
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onDelete={handleDeleteTodo}
          onEdit={handleEditTodo}
        />
      ))}
    </div>
  );
};

export default TodoList;
复制代码

在上述代码中，我们定义了一个名为的函数组件。它使用钩子来管理待办事项列表和新待办事项的输入。TodoList``useState

在组件的渲染部分，我们展示了一个输入框和一个添加按钮，用于添加新的待办事项。下方是一个由数组映射而成的待办事项列表，每个待办事项都使用组件进行渲染。todos``TodoItem

步骤 4：在根组件中使用待办事项列表组件

在目录下的文件中，将以下代码替换为默认生成的代码：src``App.js

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

const App = () => {
  return (
    <div>
      <h1>Todo List</h1>
      <TodoList />
    </div>
  );
};

export default App;
复制代码

在上述代码中，我们将组件作为根组件的子组件，并在页面上展示一个标题。TodoList

步骤 5：运行应用

现在，我们可以运行应用并查看待办事项列表的功能。

npm start
复制代码

打开浏览器，访问http://localhost:3000 ，你将看到一个简单的待办事项列表应用。你可以添加、编辑和删除待办事项，实时更新列表。

思考与分析

在这个实验中，我们使用 React 创建了一个简单的待办事项列表应用。通过使用函数组件和 React 的钩子，我们能够轻松地管理组件的状态和交互。

使用 React 的好处是，它提供了一个声明式的编程模型，使得构建用户界面变得简单和可维护。我们可以将应用拆分为多个组件，并通过 props 和回调函数进行组件之间的通信。

此外，我们还使用了 React 的状态管理钩子，它使我们能够在函数组件中使用状态。通过使用，我们可以轻松地跟踪和更新组件的状态，实现交互功能。useState``useState

总结起来，React 是一个强大且灵活的库，用于构建用户界面。通过合理地组织组件和使用钩子，我们可以创建出功能丰富且易于维护的应用程序。在实践中，我们应该思考和分析需求，并根据实际情况进行代码的编写和优化，以达到最佳的用户体验和开发效率。