React开发进阶：CRUD功能打造《TodoList》

使用 React 开发具有 CRUD 功能的待办事项应用：分步指南

前言

在当今数字化世界中，保持井井有条并管理我们的任务变得至关重要。待办事项应用是保持高效和按时完成工作的绝佳工具。在本教程中，我们将带你踏上使用 React 开发具有 CRUD（创建、读取、更新、删除）功能的待办事项应用之旅。

构建待办事项应用

1. 安装必备工具

首先，你需要安装 Node.js、React 和 create-react-app 工具：

# 安装 Node.js
npm install -g node

# 安装 React
npm install -g create-react-app

# 创建 React 项目
create-react-app todo-crud

2. 创建 React 组件

下一步是创建 <TodoList> 和 <TodoItem> React 组件。<TodoList> 组件将管理和显示待办事项列表，而 <TodoItem> 组件将管理单个待办事项：

代码示例：TodoList.js

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

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

  useEffect(() => {
    // Fetch 待办事项数据
    fetch("http://localhost:3000/todos")
      .then(res => res.json())
      .then(data => setTodos(data))
      .catch(err => console.log(err));
  }, []);

  // 添加新的待办事项
  const addTodo = (todo) => {
    fetch("http://localhost:3000/todos", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(todo)
    })
      .then(res => res.json())
      .then(data => setTodos([...todos, data]))
      .catch(err => console.log(err));
  };

  // 删除待办事项
  const deleteTodo = (id) => {
    fetch(`http://localhost:3000/todos/${id}`, {
      method: "DELETE"
    })
      .then(() => setTodos(todos.filter(todo => todo.id !== id)))
      .catch(err => console.log(err));
  };

  // 更新待办事项
  const updateTodo = (todo) => {
    fetch(`http://localhost:3000/todos/${todo.id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(todo)
    })
      .then(res => res.json())
      .then(data => {
        const updatedTodos = todos.map(t => t.id === data.id ? data : t);
        setTodos(updatedTodos);
      })
      .catch(err => console.log(err));
  };

  return (
    <div>
      <h1>待办事项</h1>
      <ul>
        {todos.map(todo => (
          <TodoItem key={todo.id} todo={todo} deleteTodo={deleteTodo} updateTodo={updateTodo} />
        ))}
      </ul>
      <button onClick={addTodo}>添加新的待办事项</button>
    </div>
  );
};

export default TodoList;

代码示例：TodoItem.js

import React, { useState } from "react";

const TodoItem = ({ todo, deleteTodo, updateTodo }) => {
  const [editing, setEditing] = useState(false);
  const [updatedTodo, setUpdatedTodo] = useState(todo);

  const handleInputChange = (e) => {
    setUpdatedTodo({ ...updatedTodo, [e.target.name]: e.target.value });
  };

  const saveTodo = () => {
    updateTodo(updatedTodo);
    setEditing(false);
  };

  return (
    <li>
      {editing ? (
        <input type="text" value={updatedTodo.text} name="text" onChange={handleInputChange} />
      ) : (
        <span>{todo.text}</span>
      )}
      <button onClick={() => deleteTodo(todo.id)}>删除</button>
      <button onClick={() => setEditing(!editing)}>{editing ? "保存" : "编辑"}</button>
    </li>
  );
};

export default TodoItem;

3. 使用 Hooks 管理状态

React Hooks（例如 useState 和 useEffect）让我们能够管理组件状态。我们将使用这些 Hooks 来管理待办事项列表和单个待办事项的状态。

4. 使用 REST API 进行数据交互

为了实现数据管理，我们需要使用 REST API 与后端进行交互。我们将使用 Fetch API 发送 HTTP 请求。

5. 使用 React Router 管理路由

React Router 帮助我们管理待办事项应用中页面的路由。

运行应用

完成这些步骤后，运行应用：

# 进入项目目录
cd todo-crud

# 运行应用
npm start

应用将在 http://localhost:3000 运行。

结论

我们已经探索了如何使用 React、Hooks、REST API 和 React Router 开发一个功能齐全的待办事项应用。掌握这些技术将使你能够构建强大且可交互的前端应用程序。

常见问题解答

1. 如何添加新的待办事项？

按 <TodoList> 组件中的“添加新的待办事项”按钮即可添加新待办事项。

2. 如何编辑待办事项？

点击待办事项旁边的“编辑”按钮，对待办事项进行编辑。完成后，按“保存”按钮。

3. 如何删除待办事项？

点击待办事项旁边的“删除”按钮即可删除待办事项。

4. 如何使用 REST API？

REST API 路由用于与后端服务器进行交互。我们在应用中使用 Fetch API 发送 HTTP 请求。

5. 如何在应用中使用 React Router？

React Router 用于管理应用中不同页面之间的路由。它允许我们轻松地在待办事项列表页和待办事项详情页之间进行切换。