前端基本功用 React Hooks + Antd 实现一个 Todo-List

news2024/11/14 2:22:03

背景

使用 React Hooks 以及组件库 Antd 来实现一个可以增删 标记是否完成 的 todo-list
在这里插入图片描述

思路

要实现一个 todo-list 首先想到用 useState 维护一个状态数组来保存当前 list ，还要用一个状态维护添加框中的内容

 const [todos, setTodos] = useState(initialValue);
 const [inputValue, setInputValue] = useState("");

然后因为是可增删，那要有一个可以增加的 Input 框和添加按钮，删除时要针对所在的那一行，所以每一个待办事项后面都有属于他自己的删除按钮，所以想到用 map 方法来实现每一行代办事项以及完成状态、改变完成状态，删除按钮的展现。
因为我们可以改变当前事项的完成状态，所以我们可以引入一个 Checkbox 标识当前行的完成状态，变为受控组件，可以改变当前行的状态，新增的 Input 框同理

 		<Input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onPressEnter={handleAddTodo}
          placeholder="输入待办事项"
        />
        <Button type="primary" onClick={handleAddTodo}>
          添加
        </Button>
         <ul>
          {todos.map((todo, index) => (
            <li key={index} style={{ marginBottom: 15 }}>
              <Space>
                <Checkbox
                  checked={todo.completed}
                  onChange={() => handleToggleComplete(index)}
                />
                {todo.text}
                <Tag color={todo.completed ? "green" : "red"}>
                  {todo.completed ? "已完成" : "   待办"}
                </Tag>
                <Button type="dashed" onClick={() => handleDeleteTodo(index)}>
                  删除
                </Button>
              </Space>
            </li>
          ))}
        </ul>

最后写一下各种受控组件的 onChange 方法，以及按钮的 onClick 方法，大功告成

const handleAddTodo = () => {
    if (inputValue.trim() !== "") {
      setTodos([...todos, { text: inputValue, completed: false }]);
      setInputValue("");
    }
  };

  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  const handleToggleComplete = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };