Checkpoint: 前端应用

你将完成什么

用 React 写一个 Todo 应用，包含：添加、删除、标记完成、筛选（全部/进行中/已完成）、本地存储。

验收标准

1. 函数组件 + Hooks（useState、useEffect）
2. Props 传递、事件处理
3. 条件渲染、列表渲染
4. localStorage 持久化

核心代码

App.jsx

import { useState, useEffect } from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';
import TodoFilter from './TodoFilter';

function App() {
    const [todos, setTodos] = useState([]);
    const [filter, setFilter] = useState('all');

    // 从 localStorage 加载
    useEffect(() => {
        const saved = localStorage.getItem('todos');
        if (saved) {
            setTodos(JSON.parse(saved));
        }
    }, []);

    // 保存到 localStorage
    useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todos));
    }, [todos]);

    const addTodo = (text) => {
        setTodos([...todos, {
            id: Date.now(),
            text,
            completed: false
        }]);
    };

    const toggleTodo = (id) => {
        setTodos(todos.map(todo =>
            todo.id === id
                ? { ...todo, completed: !todo.completed }
                : todo
        ));
    };

    const deleteTodo = (id) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    const filteredTodos = todos.filter(todo => {
        if (filter === 'active') return !todo.completed;
        if (filter === 'completed') return todo.completed;
        return true;
    });

    return (
        <div className="app">
            <h1>Todo 应用</h1>
            <TodoForm onAdd={addTodo} />
            <TodoFilter filter={filter} onChange={setFilter} />
            <TodoList
                todos={filteredTodos}
                onToggle={toggleTodo}
                onDelete={deleteTodo}
            />
        </div>
    );
}

export default App;

TodoForm.jsx

import { useState } from 'react';

function TodoForm({ onAdd }) {
    const [text, setText] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!text.trim()) return;
        onAdd(text);
        setText('');
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="输入待办事项"
            />
            <button type="submit">添加</button>
        </form>
    );
}

export default TodoForm;