青训营笔记 | 入门React? 就写一个Todo List吧 | 豆包MarsCode AI刷题

FOFO
19 阅读5分钟

构建项目

首先我们使用 vite 构建一个 React 项目

在终端中运行以下命令

npm create vite@latest react-todo-list --template react

我们便可以得到一个叫做 react-todo-list 项目文件夹

进入此文件夹, 用 VSCode 打开可以看到以下目录

image.png

在终端中运行 npm i 安装所需的依赖项

再使用 npm run dev 启动开发服务器

image.png

打开http://localhost:5173便可以看到页面中出现

image.png

说明一个简单的 React 项目已经构建完成!

写一个 Todo list

我们的目标是写一个能够存储在浏览器本地的Todo list

实现以下功能:

  • 在输入框中写出待办事项, 点击 Add 按钮后, 待办事项出现在下方
  • 每个待办事项对应 checkbox 复选框和 delete按钮
  • 勾选复选框后, 标记待办事项完成
  • 点击删除后, 待办事项即消失
  • 核心功能: 刷新后待办事项的状态不变

拓展 features

  • 勾选复选框后, 待办事项添加删除线
  • 勾选复选框后, 待办事项移动到未完成的待办事项后面
  • 取消勾选复选框后, 待办事项回到原来的位置
  • 添加移动的动画, 同时保证功能正常
  • 筛选功能, 选出已完成, 未完成和全部的待办事项
  • ......

以上功能不在本文中实现, 可以当作小练习

效果图如下

image.png

实操步骤

组件划分

我们可以先将主要功能划分成几个主要组件

其实对于初学者, 可以试着先在一个组件完成所有内容之后再封装成各个组件,

但是学会了封装组件, 就肯定可以在一个组件内写完全部内容, 那么我们直接将组件功能划分

建议读者自己思考一下, 需要怎样划分组件, 进而实现以上功能

小试牛刀

接下来, 我讲讲我的实现思路, Todo list 的实现可能有各种方法

但最简单的实现思想基本是如下

  1. App 组件：

    • 作为主入口，管理应用的状态（即任务列表）。
    • 渲染其他子组件并将状态通过 props 传递给它们。

  2. TodoForm 组件：

    • 提供一个输入框和按钮，用户可以在输入框中输入新任务并点击按钮添加到任务列表中。
    • 表单提交时生成新任务，并通过 setTodos 方法更新任务列表。

  3. TodoList 组件：

    • 接收任务列表并逐一渲染每个任务。
    • 遍历任务列表，生成多个 TodoItem 组件。

  4. TodoItem 组件：

    • 渲染单个任务的名称、复选框（完成状态）和删除按钮。
    • 复选框用于标记任务是否完成，按钮用于删除任务。

对于状态管理, 我们可以使用一个对象对应一个待办事项

  • 在 App 组件中使用 React 的 useState 来管理整个 Todo List 的状态（一个数组，每个对象表示一个任务）。

  • 任务对象形如：

    { id: 1, text: "Learn React", done: false }

补充一下, 每个组件的代码都要放在以自己名字命名的后缀为.jsx的文件里, 这是组件封装的基本操作

开始实操

我们先从 App 组件入手, 这一般是所有组件的入口

这里是基本的 App 组件的实现

import { useState } from "react";
import TodoForm from "./TodoForm.jsx";
import TodoList from "./TodoList.jsx";

export default function App() {
  const [todos, setTodos] = useState(() => {
    return [];
  });

  return (
    <>
      <TodoForm setTodos={setTodos} />
      <TodoList todos={todos} setTodos={setTodos} />
    </>
  );
}

将 todos 状态用于存储所有代办事项

想一想为什么要将这个状态放在 App 组件里

接着我们实现 TodoForm 这一组件

export function TodoForm({ setTodos }) {
  console.log("TodoForm render started");
  function handleSubmit(e) {
    e.preventDefault();
    if (e.target.parentElement.querySelector("#newItem").value === "") {
      return;
    }
    let newItemName = e.target.parentElement.querySelector("#newItem").value;
    let newItem = { id: crypto.randomUUID(), name: newItemName, done: false };
    setTodos((todos) => [...todos, newItem]);
    e.target.parentElement.querySelector("#newItem").value = "";
    console.log("new todo added");
  }
  return (
    <>
      <form>
        <label htmlFor="newItem">Add Todo </label>
        <input
          type="text"
          name="newItem"
          id="newItem"
          placeholder="Enter a todo"
          required
        />
        <button
          type="submit"
          onClick={(e) => {
            handleSubmit(e);
          }}
        >
          Add
        </button>
      </form>
    </>
  );
}

注意查看怎么使用 setTodos 来更新状态的

接着看看 TodoList 的实现

import { TodoItem } from "./TodoItem.jsx";
export function TodoList({ todos, setTodos }) {
  return (
    <>
      <ul>
        {todos.map((todo) => {
          return (
            <TodoItem
              {...todo}
              todo={todo}
              key={todo.id}
              setTodos={setTodos}
            />
          );
        })}
      </ul>
    </>
  );
}

注意map函数内的各个返回 JSX 都要带上不同的 key, 这是 React 的规定

因为这样 React 就能确定列表里的各个 item 的顺序与是否存在

以下是 TodoItem 组件的实现

export function TodoItem({ todo, setTodos }) {
  function handleDelete(e, todo) {
    e.preventDefault();
    setTodos((curTodos) =>
      curTodos.filter((curTodo) => curTodo.id !== todo.id)
    );
  }

  function handleToggle(e, todo) {
    setTodos((curTodos) =>
      curTodos.map((curTodo) => {
        if (curTodo.id === todo.id) {
          curTodo.done = Boolean(e.target.checked);
        }
        return curTodo;
      })
    );
  }
  return (
    <li key={todo.id}>
      <input
        type="checkbox"
        name="item"
        id={todo.id}
        onChange={(e) => handleToggle(e, todo)}
        checked={todo.done}
      />
      <label htmlFor={todo.id}>{todo.name}</label>
      <button type="button" onClick={(e) => handleDelete(e, todo)}>
        DELETE
      </button>
    </li>
  );
}

注意对于复选框和删除按钮的逻辑处理

它们分别要修改 todos 的不同状态, 用到的技巧也比较 tricky

如果有不熟悉的建议问问 豆包AI 或者 Google 一下

因为逻辑本身很简单, 这里不过多解释

最后

但是你发现实现后, 添加和删除任意 todo 后, 刷新浏览器

todo会全部消失

这是因为 React 并不会真正保留状态, 要保留状态我们可以将 todos 状态存到 浏览器缓存 里

这里我也不说具体步骤, 因为这样的问题 Google 或者 GPT 可以轻松搞定

这里给出实现代码

export default function App() {
  const [todos, setTodos] = useState(() => {
    return JSON.parse(localStorage.getItem("todos")) || [];
  });

  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);


  return (
    <>
      <TodoForm setTodos={setTodos} />
      <TodoList todos={todos} setTodos={setTodos} />
    </>
  );
}

只需要在App 组件里动些手脚就可以

不知道你学会了吗?

哈哈哈哈好贱, 如果遇到麻烦可以找视频教程看看, 不必局限在本文的语境下❤️❤️

avatar
文章
阅读
粉丝