如何使用 React 寫一個 TodoList

下面是一個使用React寫的簡單TodoList範例程式碼。這個範例包括添加新項目、顯示列表和刪除項目的基本功能，不依賴於任何第三方函式庫。

import React, { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  // 添加任務的函數
  const addTask = () => {
    if (!newTask) return; // 如果沒有新任務，則返回
    setTasks([...tasks, newTask]);
    setNewTask(''); // 清空輸入框
  };

  // 刪除任務的函數
  const deleteTask = (index) => {
    const newTasks = tasks.filter((task, taskIndex) => index !== taskIndex);
    setTasks(newTasks);
  };

  // 處理輸入變化的函數
  const handleInputChange = (e) => {
    setNewTask(e.target.value);
  };

  // 處理提交表單的函數
  const handleSubmit = (e) => {
    e.preventDefault(); // 防止表單提交刷新頁面
    addTask();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newTask}
          onChange={handleInputChange}
        />
        <button type="submit">Add Task</button>
      </form>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task} <button onClick={() => deleteTask(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;