React打造多功能TodoList

2023-10-30 18:20:26

大家好，今天我将为大家带来React打造多功能TodoList的教程。TodoList是一个非常受欢迎的任务管理工具，可以帮助您轻松记录和管理您的待办事项。本文将介绍如何使用React快速构建一个功能完善的TodoList。

新建TodoList组件

首先，我们需要创建一个新的TodoList组件。为此，请在您的项目目录中创建一个名为TodoList.js的文件，并输入以下代码：

import React, { useState } from "react";

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

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

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

  const markTodoAsDone = (todo) => {
    setTodos(
      todos.map((t) => {
        if (t === todo) {
          return { ...t, isDone: true };
        }
        return t;
      })
    );
  };

  return (
    <div>
      <input type="text" placeholder="Add a todo" onKeyPress={(e) => { if (e.key === 'Enter') { addTodo(e.target.value) } }}/>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input type="checkbox" checked={todo.isDone} onChange={() => { markTodoAsDone(todo) }}/>
            {todo.text}
            <button onClick={() => { removeTodo(todo) }}>X</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;