构建项目
首先我们使用 vite 构建一个 React 项目
在终端中运行以下命令
npm create vite@latest react-todo-list --template react
我们便可以得到一个叫做 react-todo-list
项目文件夹
进入此文件夹, 用 VSCode 打开可以看到以下目录
在终端中运行 npm i
安装所需的依赖项
再使用 npm run dev
启动开发服务器
打开http://localhost:5173
便可以看到页面中出现
说明一个简单的 React 项目已经构建完成!
写一个 Todo list
我们的目标是写一个能够存储在浏览器本地的Todo list
实现以下功能:
- 在输入框中写出待办事项, 点击
Add
按钮后, 待办事项出现在下方 - 每个待办事项对应
checkbox
复选框和delete
按钮 - 勾选复选框后, 标记待办事项完成
- 点击删除后, 待办事项即消失
- 核心功能: 刷新后待办事项的状态不变
拓展 features
- 勾选复选框后, 待办事项添加删除线
- 勾选复选框后, 待办事项移动到未完成的待办事项后面
- 取消勾选复选框后, 待办事项回到原来的位置
- 添加移动的动画, 同时保证功能正常
- 筛选功能, 选出已完成, 未完成和全部的待办事项
- ......
以上功能不在本文中实现, 可以当作小练习
效果图如下
实操步骤
组件划分
我们可以先将主要功能划分成几个主要组件
其实对于初学者, 可以试着先在一个组件完成所有内容之后再封装成各个组件,
但是学会了封装组件, 就肯定可以在一个组件内写完全部内容, 那么我们直接将组件功能划分
建议读者自己思考一下, 需要怎样划分组件, 进而实现以上功能
小试牛刀
接下来, 我讲讲我的实现思路, Todo list 的实现可能有各种方法
但最简单的实现思想基本是如下
-
App
组件:- 作为主入口,管理应用的状态(即任务列表)。
- 渲染其他子组件并将状态通过
props
传递给它们。
-
TodoForm
组件:- 提供一个输入框和按钮,用户可以在输入框中输入新任务并点击按钮添加到任务列表中。
- 表单提交时生成新任务,并通过
setTodos
方法更新任务列表。
-
TodoList
组件:- 接收任务列表并逐一渲染每个任务。
- 遍历任务列表,生成多个
TodoItem
组件。
-
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 组件里动些手脚就可以
不知道你学会了吗?
哈哈哈哈好贱, 如果遇到麻烦可以找视频教程看看, 不必局限在本文的语境下❤️❤️