使用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' }}>
        <TextField
            fullWidth
            label="Search Todos"
            variant="outlined"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            margin="normal"
        />

        <List>
            {todos.map((todo) => (
                <ListItem
                    key={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
                    }}
                >
                    <Checkbox
                        checked={Boolean(todo.completed)}
                        onChange={() => updateTodo(todo, true)}
                    />
                    <ListItemText
                        primary={todo.title}
                        secondary={todo.description}
                        style={{
                            textDecoration: todo.completed ? 'line-through' : 'none',
                        }}
                    />
                </ListItem>
            ))}
        </List>

        <div style={{ display: 'flex', gap: 10, marginBottom: 20 }}>
            <TextField
                fullWidth
                label="New Todo Title"
                value={newTodo.title}
                onChange={(e) => setNewTodo({ ...newTodo, title: e.target.value })}
            />
            <TextField
                fullWidth
                label="Description"
                value={newTodo.description}
                onChange={(e) => setNewTodo({ ...newTodo, description: e.target.value })}
            />
            <Button
                variant="contained"
                color="primary"
                onClick={createTodo}
            >
                Add
            </Button>
        </div>

        <Dialog open={Boolean(editingTodo)} onClose={handleClose}>
            <DialogTitle>Edit Todo</DialogTitle>
            <DialogContent>
                <TextField
                    autoFocus
                    margin="dense"
                    label="Title"
                    fullWidth
                    value={editForm.title}
                    onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
                />
                <TextField
                    margin="dense"
                    label="Description"
                    fullWidth
                    multiline
                    rows={3}
                    value={editForm.description}
                    onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
                />
                <FormControlLabel
                    control={(
                        <Checkbox
                            checked={editForm.completed}
                            onChange={(e) => setEditForm({ ...editForm, completed: e.target.checked })}
                        />
                    )}
                    label="Completed"
                />
            </DialogContent>
            <DialogActions>
                <Button onClick={handleClose} color="primary">
                    Cancel
                </Button>
                <Button
                    onClick={handleSave}
                    color="primary"
                    disabled={!editForm.title.trim()}
                >
                    Save
                </Button>
            </DialogActions>
        </Dialog>
    </div>
);