React从零到精通：打造动态待办事项列表

2023-04-27 11:17:22

使用React构建待办事项应用程序：掌控你的任务

序言

在快节奏的数字世界中，保持条理和高效至关重要。一款功能强大的待办事项应用程序可以帮助你掌控繁忙的工作或生活，确保完成最重要的任务，避免错过关键事件。本文将引导你使用React，从零开始构建一个全面的待办事项列表应用程序，助力你的任务管理之旅。

了解React

React是一个备受推崇的JavaScript库，用于构建高效且可维护的前端应用程序。它采用声明式编程范式，使开发过程更加直观且易于管理。React组件的模块化特性可确保代码井然有序，便于维护和扩展。

项目结构

为了打造一个结构清晰、易于扩展的待办事项应用程序，我们建议采用以下项目结构：

App.js： 应用程序的入口点，负责加载和渲染其他组件。
TodoItem.js： 表示单个待办事项的组件。
TodoList.js： 包含所有待办事项的列表组件。
styles.css： 应用程序的样式表。

创建待办事项列表

构建待办事项应用程序的第一步是创建上述组件。使用React的脚手架工具（如create-react-app）可以轻松启动项目。

创建React应用程序：
```
npx create-react-app todo-app
```
启动项目：
```
cd todo-app
npm start
```
创建组件：
在src文件夹中，创建以下组件文件：
- App.js
- TodoItem.js
- TodoList.js

编写代码：
在App.js文件中，添加以下代码：

import TodoList from './TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

在TodoList.js文件中，添加以下代码：

import TodoItem from './TodoItem';
import { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

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

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

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

  return (
    <div>
      <button onClick={addTodo}>添加待办事项</button>
      <ul>
        {todos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} removeTodo={removeTodo} toggleTodo={toggleTodo} />
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在TodoItem.js文件中，添加以下代码：

function TodoItem({ todo, removeTodo, toggleTodo }) {
  const handleRemoveTodo = () => {
    removeTodo(todo.id);
  };

  const handleToggleTodo = () => {
    toggleTodo(todo.id);
  };

  return (
    <li>
      <input type="checkbox" checked={todo.completed} onChange={handleToggleTodo} />
      <label>{todo.task}</label>
      <button onClick={handleRemoveTodo}>X</button>
    </li>
  );
}

export default TodoItem;