使用React 实现一个简单的待办事项列表 | 青训营

待办事项列表是一个常见的功能，可以帮助用户记录、管理和跟踪任务。我们将使用React的组件化思想和状态管理，创建一个简单而实用的待办事项列表应用。

创建组件

我们将创建两个主要的组件：TodoList和TodoItem。TodoList组件将管理整个待办事项列表，而TodoItem组件将表示单个待办事项。

TodoItem 组件

import React from 'react';

function TodoItem({ task, onToggle, onDelete }) {
  return (
    <div className={`todo-item ${task.completed ? 'completed' : ''}`}>
      <input
        type="checkbox"
        checked={task.completed}
        onChange={onToggle}
      />
      <span className="task-title">{task.title}</span>
      <button onClick={onDelete} className="delete-button">
        删除
      </button>
    </div>
  );
}

export default TodoItem;

TodoList 组件

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

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [newTaskTitle, setNewTaskTitle] = useState('');

  const addTask = () => {
    if (newTaskTitle.trim() === '') return;

    const newTask = {
      title: newTaskTitle,
      completed: false,
    };

    setTasks([...tasks, newTask]);
    setNewTaskTitle('');
  };

  const toggleTask = (index) => {
    const updatedTasks = [...tasks];
    updatedTasks[index].completed = !updatedTasks[index].completed;
    setTasks(updatedTasks);
  };

  const deleteTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div className="todo-list">
      <h1>待办事项列表</h1>
      <div className="new-task">
        <input
          type="text"
          placeholder="输入新任务"
          value={newTaskTitle}
          onChange={(e) => setNewTaskTitle(e.target.value)}
        />
        <button onClick={addTask}>添加</button>
      </div>
      <div className="task-list">
        {tasks.map((task, index) => (
          <TodoItem
            key={index}
            task={task}
            onToggle={() => toggleTask(index)}
            onDelete={() => deleteTask(index)}
          />
        ))}
      </div>
    </div>
  );
}

export default TodoList;

在这个示例中，我们使用React框架创建了一个简单的待办事项列表应用。用户可以添加新任务，标记任务为已完成或删除任务。这个应用充分展示了React的组件化、状态管理和交互功能。

使用React创建待办事项列表应用是一个简单且实用的示例，演示了React在构建前端应用中的优势。通过组件化和状态管理，我们可以高效地实现任务列表的增删改查功能。