小型项目：待办事项应用（React基础功能的综合应用）

在本项目中，我们将创建一个简单的待办事项应用，这是一个常见的任务管理工具，可以帮助用户添加、删除、标记任务完成等。这个项目将展示如何使用 React 的基础功能，帮助你加深对 React 核心概念的理解。

1. 项目简介

这个待办事项应用的基本功能包括：

  • 添加新的待办事项
  • 标记待办事项为已完成
  • 删除待办事项
  • 按照完成状态进行筛选（显示所有、只显示未完成、只显示已完成）

2. 项目结构

我们将项目结构保持简单，主要有以下几个部分：

  • App.js：主应用组件，负责整体布局和功能控制。
  • TodoItem.js：表示每个待办事项的组件。
  • TodoList.js：管理待办事项列表的容器组件。
  • AddTodo.js：用于添加新待办事项的表单组件。
src/ 
├── components/ 
│ ├── AddTodo.js // 添加待办事项表单 
│ ├── TodoItem.js // 单个待办事项组件 
│ └── TodoList.js // 待办事项列表容器 
├── App.js // 主应用组件 
└── index.js // 入口文件

3. 创建 Todo 应用

3.1 App.js 主应用组件

在 App.js 中，我们将管理待办事项的状态，并传递给其他组件。

import React, { useState } from 'react';
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';

function App() {
  const [todos, setTodos] = useState([]);
  const [filter, setFilter] = useState('all'); // 用于筛选待办事项

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

  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 === 'completed') return todo.completed;
    if (filter === 'incomplete') return !todo.completed;
    return true; // 'all'状态
  });

  return (
    <div className="App">
      <h1>待办事项</h1>
      <AddTodo addTodo={addTodo} />
      <div>
        <button onClick={() => setFilter('all')}>全部</button>
        <button onClick={() => setFilter('completed')}>已完成</button>
        <button onClick={() => setFilter('incomplete')}>未完成</button>
      </div>
      <TodoList
        todos={filteredTodos}
        toggleTodo={toggleTodo}
        deleteTodo={deleteTodo}
      />
    </div>
  );
}

export default App;

3.2 TodoList.js 待办事项列表组件

TodoList.js 用于展示所有待办事项，并允许用户标记完成或删除任务。

import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos, toggleTodo, deleteTodo }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          toggleTodo={toggleTodo}
          deleteTodo={deleteTodo}
        />
      ))}
    </ul>
  );
}

export default TodoList;

3.4 AddTodo.js 添加待办事项表单组件

AddTodo.js 负责展示添加新待办事项的表单，并处理表单提交。

import React, { useState } from 'react';

function AddTodo({ addTodo }) {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim()) {
      addTodo(input);
      setInput('');
    }
  };

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

export default AddTodo;

4. 样式和优化

4.1 基本样式

为使应用更具可用性，我们可以为不同的组件添加一些基本样式。以下是一些简单的 CSS 样式：

.App {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

input[type="checkbox"] {
  margin-right: 10px;
}

button {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #c0392b;
}

4.2 提高用户体验

  • 添加输入验证：确保用户输入非空内容。
  • 使用本地存储：将待办事项存储在浏览器的本地存储中，确保刷新后数据不丢失。
  • 动画效果：为添加和删除待办事项添加简单的过渡动画。

5. 总结

通过这个小型待办事项应用，我们实现了以下 React 核心概念：

  • 状态管理：通过 useState 管理待办事项的状态。
  • 事件处理：处理用户交互（如添加、删除、标记完成等）。
  • 组件结构：分离不同功能的组件，增强代码的复用性。
  • 条件渲染：根据任务状态显示不同样式或内容。

这个项目展示了 React 的基本使用，适合作为初学者的综合实践。

Last Updated::