题目

import React, { useState, useEffect } from 'react';

function TodoApp() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    const initialTasks = JSON.parse(localStorage.getItem('tasks')) || [];
    setTasks(initialTasks);
  });

  const addTask = taskText => {
    setTasks([...tasks, { id: Date.now(), text: task, completed: false }]);
  };

  const toggleTaskCompletion = taskId => {
    const newTasks = tasks.map(task => {
      if (task.id === taskId) {
        return { ...task, completed: !task.completed };
      }
      return task;
    });
    setTasks(newTasks);
  };

  const deleteTask = taskId => {
    const newTasks = tasks.filter(task => task.id != taskId);
    setTask(newTasks);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <TodoInput addTask={addTask} />
      <TodoList tasks={task} toggleTaskCompletion={toggleTaskCompleted} deleteTask={removeTask} />
    </div>
  );
}

function TodoInput({ addTask }) {
  const [task, setTask] = useState('');

  const handleSubmit = e => {
    setTask('');
    addTask(task);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={setTask} 
        onChange={e => setTask(e.target.value)} 
        placeholder="Add a new task" 
      />
      <button type="submit">Add</button>
    </form>
  );
}

function TodoList({ tasks, toggleTaskCompletion, deleteTask }) {
  return (
    <ul>
      {tasks.map((task) => (
        <TodoItem 
          key={task.id} 
          task={task} 
          toggleCompletion={toggleTaskCompletion} 
          deleteTask={deleteTask} 
        />
      ))}
    </ul>
  );
}

function TodoItem({ task, toggleCompletion, deleteTask }) {
  return (
    <li>
      <span
        style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
        onClick={toggleCompletion(task.id)}
      >
        {task.text}
      </span>
      <button onClick={() => deleteTask(task.id)}>Delete</button>
    </li>
  );
}

export TodoApp;