React-todolist

题目要求：用 React Hooks 完成代办应用相关功能

• 顶部输入框+右侧添加代办按钮，输入框敲回车或点击添加代办按钮时在列表最前面添加一条代办
• 输入框底部有个状态筛选配置项，状态为：全部、已完成、未完成 列表中展示筛选项指定的状态的列表数据
• 支持点击列表条目左侧的复选框来设置为已完成或未完成 支持点击列表条目右侧的删除按钮来删除代办
  效果图：
  
  TodoItem.jsx

import React from "react";

const TodoItem = ({ todo, handleCheck, handleDelete }) => {
  const { id, text, completed } = todo;
  return (
    <li>
      <input
        type="checkbox"
        checked={completed}
        onChange={() => handleCheck(id)}
      />
      <span style={{ textDecoration: completed ? "line-through" : "none" }}>
        {text}
      </span>
      <button onClick={() => handleDelete(id)}>Delete</button>
    </li>
  );
};

export default TodoItem;

TodoList.jsx

import React, { useState } from "react";
import { Button, Input, Space } from "antd";
import TodoItem from "./TodoItem";
const { Search } = Input;

const defaultTodos = [
  { id: 1, text: "Todo Item 1", completed: false },
  { id: 2, text: "Todo Item 2", completed: true },
  { id: 3, text: "Todo Item 3", completed: false },
];

const TodoListApp = () => {
  return (
    <div>
      <h5>题目要求：用 React Hooks 完成代办应用相关功能</h5>
      <ul>
        <li>
          顶部输入框+右侧添加代办按钮，输入框敲回车或点击添加代办按钮时在列表最前面添加一条代办
        </li>
        <li>输入框底部有个状态筛选配置项，状态为：全部、已完成、未完成</li>
        <li>列表中展示筛选项指定的状态的列表数据</li>
        <li>支持点击列表条目左侧的复选框来设置为已完成或未完成</li>
        <li>支持点击列表条目右侧的删除按钮来删除代办</li>
      </ul>
      <hr />
      <TodoList />
    </div>
  );
};

const TodoList = () => {
  const [todos, setTodos] = useState(defaultTodos);
  const [inputValue, setInputValue] = useState("");
  const [filter, setFilter] = useState("all");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleAddTodo = () => {
    const newTodo = {
      id: Math.floor(Math.random() * 1000),
      text: inputValue,
      completed: false,
    };
    setTodos([newTodo, ...todos]);
    setInputValue("");
  };

  const handleCheck = (id) => {
    const updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        return { ...todo, completed: !todo.completed };
      } else {
        return todo;
      }
    });
    setTodos(updatedTodos);
  };

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

  const filterTodos = (todos) => {
    switch (filter) {
      case "completed":
        return todos.filter((todo) => todo.completed);
      case "uncompleted":
        return todos.filter((todo) => !todo.completed);
      default:
        return todos;
    }
  };

  return (
    <>
      <div>
        <Space.Compact
          style={{
            width: "100%",
          }}
        >
          <Input
            placeholder="输入框敲回车或点击添加代办按钮时在列表最前面添加一条代办"
            value={inputValue}
            onChange={handleInputChange}
            onKeyDown={(event) => event.key === "Enter" && handleAddTodo()}
          />
          <Button type="primary" onClick={handleAddTodo}>
            代办
          </Button>
        </Space.Compact>

        <select
          value={filter}
          onChange={(event) => setFilter(event.target.value)}
        >
          <option value="all">全部</option>
          <option value="completed">已完成</option>
          <option value="uncompleted">未完成</option>
        </select>
        <ul>
          {filterTodos(todos).map((todo) => {
            return (
              <TodoItem
                key={todo.id}
                todo={todo}
                handleCheck={handleCheck}
                handleDelete={handleDelete}
              />
            );
          })}
        </ul>
      </div>
    </>
  );
};
export default TodoListApp;