使用React和Material-UI构建TODO应用的前端UI

- - - 引言
    - 环境准备
    - 代码解析
    - - 1. 导入必要的模块
      - 2. 创建React组件
      - 3. 定义函数
      - 3.1 获取TODO列表
        3.2 创建TODO项
        3.3 更新TODO项
        3.4 删除TODO项
        3.5 处理编辑点击事件
        3.6 关闭编辑对话框
        3.7 保存编辑内容
      - 4. 使用Effect钩子
      - 5. 渲染组件
    - 功能实现
    - 优化建议
    - 总结

引言

在现代Web开发中，TODO列表应用是一个经典的示例，用于展示如何使用前端技术构建一个简单的任务管理工具。本文将详细介绍如何使用React框架和Material-UI库来构建一个TODO列表应用，并解释代码的各个部分，帮助读者理解其工作原理。

后端API请参考，使用Express.js和SQLite3构建简单TODO应用的后端API

环境准备

在开始之前，请确保你已经安装了以下工具和库：

Node.js：确保你已经安装了Node.js，可以从Node.js官网下载并安装。
npm：Node.js的包管理工具，随Node.js一起安装。
React：一个用于构建用户界面的JavaScript库，可以通过npm安装。
Material-UI：一个基于Material Design的React组件库，同样可以通过npm安装。
axios：一个基于Promise的HTTP客户端，用于处理API请求。

安装所需的依赖：

npm install react @mui/material @emotion/react @emotion/styled axios

代码解析

让我们逐步分析代码，理解每个部分的功能。

1. 导入必要的模块

import { useState, useEffect } from 'react';
import axios from 'axios';
import {TextField,Button,Checkbox,List,ListItem,ListItemText,IconButton,Dialog,DialogTitle,DialogContent,DialogActions,FormControlLabel
} from '@mui/material';
import { Delete, Edit } from '@mui/icons-material';
import { Todo } from '../types/todo';

React：导入useState和useEffect钩子，用于状态管理和副作用处理。
axios：用于发送HTTP请求。
Material-UI：导入各种组件，如文本框、按钮、列表、对话框等。
Icons：导入删除和编辑图标。
Todo类型：定义TODO项的类型，确保数据的类型安全。

2. 创建React组件

export default function TodoList() {const [todos, setTodos] = useState<Todo[]>([]);const [searchTerm, setSearchTerm] = useState('');const [newTodo, setNewTodo] = useState({ title: '', description: '' });const [editingTodo, setEditingTodo] = useState<Todo | null>(null);const [editForm, setEditForm] = useState({ title: '', description: '', completed: false });

todos：存储TODO列表的状态。
searchTerm：存储搜索词的状态。
newTodo：存储新TODO项的状态。
editingTodo：存储正在编辑的TODO项的状态。
editForm：存储编辑表单的状态。

3. 定义函数

3.1 获取TODO列表

const fetchTodos = async () => {try {const response = await axios.get(`http://localhost:3002/api/todos?q=${searchTerm}`);setTodos(response.data);} catch (error) {console.error('Error fetching todos:', error);}
};

功能：从后端获取TODO列表，支持搜索功能。
实现：使用axios.get发送GET请求，根据searchTerm进行模糊搜索。

3.2 创建TODO项

const createTodo = async () => {if (!newTodo.title.trim()) return;try {await axios.post('http://localhost:3002/api/todos', newTodo);setNewTodo({ title: '', description: '' });fetchTodos();} catch (error) {console.error('Error creating todo:', error);}
};

功能：创建一个新的TODO项。
实现：检查标题是否为空，使用axios.post发送POST请求，创建成功后清空表单并刷新列表。

3.3 更新TODO项

const updateTodo = async (todo: Todo, isToggleComplete = false) => {try {const updatedTodo = isToggleComplete? { ...todo, completed: !todo.completed }: { ...todo, title: editForm.title, description: editForm.description, completed: editForm.completed };await axios.put(`http://localhost:3002/api/todos/${todo.id}`, updatedTodo);setEditingTodo(null);fetchTodos();} catch (error) {console.error('Error updating todo:', error);}
};

功能：更新TODO项，支持标记完成和编辑内容。
实现：根据isToggleComplete决定是更新完成状态还是编辑内容，使用axios.put发送PUT请求。

3.4 删除TODO项

const deleteTodo = async (id: number) => {try {await axios.delete(`http://localhost:3002/api/todos/${id}`);fetchTodos();} catch (error) {console.error('Error deleting todo:', error);}
};

功能：删除指定的TODO项。
实现：使用axios.delete发送DELETE请求，删除成功后刷新列表。

3.5 处理编辑点击事件

const handleEditClick = (todo: Todo) => {setEditingTodo(todo);setEditForm({title: todo.title,description: todo.description || '',completed: todo.completed});
};

功能：打开编辑对话框，填充TODO项的详细信息。
实现：设置editingTodo和editForm状态，显示编辑表单。

3.6 关闭编辑对话框

const handleClose = () => {setEditingTodo(null);setEditForm({ title: '', description: '', completed: false });
};

功能：关闭编辑对话框，重置表单。
实现：清除editingTodo和editForm状态。

3.7 保存编辑内容

const handleSave = () => {if (editingTodo && editForm.title.trim()) {updateTodo(editingTodo);}
};

功能：保存编辑的内容。
实现：检查标题是否为空，调用updateTodo更新TODO项。

4. 使用Effect钩子

useEffect(() => {const debounceSearch = setTimeout(() => {fetchTodos();}, 300);return () => clearTimeout(debounceSearch);
}, [searchTerm]);

功能：实现搜索的防抖动效果，防止频繁请求。
实现：使用setTimeout延迟300毫秒后执行fetchTodos，并在组件销毁时清除定时器。

5. 渲染组件

return (<div style={{ maxWidth: 600, margin: '0 auto', padding: '20px' }}><TextFieldfullWidthlabel="Search Todos"variant="outlined"value={searchTerm}onChange={(e) => setSearchTerm(e.target.value)}margin="normal"/><List>{todos.map((todo) => (<ListItemkey={todo.id}secondaryAction={(<><IconButton onClick={() => handleEditClick(todo)}><Edit /></IconButton><IconButton onClick={() => deleteTodo(todo.id)}><Delete /></IconButton></>)}style={{display: todo.completed ? 'none' : 'flex',opacity: todo.completed ? 0.7 : 1}}><Checkboxchecked={Boolean(todo.completed)}onChange={() => updateTodo(todo, true)}/><ListItemTextprimary={todo.title}secondary={todo.description}style={{textDecoration: todo.completed ? 'line-through' : 'none',}}/></ListItem>))}</List><div style={{ display: 'flex', gap: 10, marginBottom: 20 }}><TextFieldfullWidthlabel="New Todo Title"value={newTodo.title}onChange={(e) => setNewTodo({ ...newTodo, title: e.target.value })}/><TextFieldfullWidthlabel="Description"value={newTodo.description}onChange={(e) => setNewTodo({ ...newTodo, description: e.target.value })}/><Buttonvariant="contained"color="primary"onClick={createTodo}>Add</Button></div><Dialog open={Boolean(editingTodo)} onClose={handleClose}><DialogTitle>Edit Todo</DialogTitle><DialogContent><TextFieldautoFocusmargin="dense"label="Title"fullWidthvalue={editForm.title}onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}/><TextFieldmargin="dense"label="Description"fullWidthmultilinerows={3}value={editForm.description}onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}/><FormControlLabelcontrol={(<Checkboxchecked={editForm.completed}onChange={(e) => setEditForm({ ...editForm, completed: e.target.checked })}/>)}label="Completed"/></DialogContent><DialogActions><Button onClick={handleClose} color="primary">Cancel</Button><ButtononClick={handleSave}color="primary"disabled={!editForm.title.trim()}>Save</Button></DialogActions></Dialog></div>
);