10分钟使用React实现一个简单的待办事项列表的骨架 ｜ 青训营

言起志
97 阅读4分钟

前言

完成一下任务,这边使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项,下面是我自己写的一个简单的React组件骨架

代码

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]); // 使用useState来管理待办事项列表
  const [inputValue, setInputValue] = useState(''); // 使用useState来管理输入框的值
  const [editIndex, setEditIndex] = useState(-1); // 使用useState来管理正在编辑的待办事项的索引
  const [editValue, setEditValue] = useState(''); // 使用useState来管理正在编辑的待办事项的值

  const addTodo = () => {
    if (inputValue !== '') {
      setTodos([...todos, inputValue]); // 将新的待办事项添加到列表中
      setInputValue(''); // 清空输入框的值
    }
  };

  const deleteTodo = (index) => {
    const updatedTodos = [...todos];
    updatedTodos.splice(index, 1); // 从列表中删除指定索引的待办事项
    setTodos(updatedTodos); // 更新待办事项列表
  };

  const startEditTodo = (index, value) => {
    setEditIndex(index); // 设置正在编辑的待办事项的索引
    setEditValue(value); // 设置正在编辑的待办事项的值
  };

  const cancelEditTodo = () => {
    setEditIndex(-1); // 取消编辑状态，将正在编辑的待办事项索引重置为-1
    setEditValue(''); // 清空正在编辑的待办事项的值
  };

  const saveEditTodo = (index) => {
    const updatedTodos = [...todos];
    updatedTodos[index] = editValue; // 将正在编辑的待办事项的值保存到指定索引的位置
    setTodos(updatedTodos); // 更新待办事项列表
    setEditIndex(-1); // 取消编辑状态
    setEditValue(''); // 清空正在编辑的待办事项的值
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {editIndex === index ? (
              <>
                <input
                  type="text"
                  value={editValue}
                  onChange={(e) => setEditValue(e.target.value)}
                />
                <button onClick={() => saveEditTodo(index)}>Save</button>
                <button onClick={cancelEditTodo}>Cancel</button>
              </>
            ) : (
              <>
                {todo}
                <button onClick={() => deleteTodo(index)}>Delete</button>
                <button onClick={() => startEditTodo(index, todo)}>Edit</button>
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

组件介绍

这个待办事项列表组件使用了React的函数组件和Hooks来实现。组件的主要逻辑包括添加、编辑和删除待办事项。

变量的用途介绍

首先，在组件中使用了useState Hook来声明了四个状态变量：todos、inputValue、editIndex和editValue。

todos是一个数组，用于存储所有的待办事项。

inputValue用于保存输入框的值。

editIndex用于保存正在编辑的待办事项的索引，初始值为-1表示没有待办事项正在编辑。

editValue用于保存正在编辑的待办事项的值。

具体逻辑介绍

  1. 在addTodo函数中，通过判断inputValue是否为空来确定是否将新的待办事项添加到todos数组中，并将输入框的值清空。

  2. deleteTodo函数用于删除指定索引的待办事项。首先，通过展开运算符将todos数组复制到updatedTodos变量中。然后，使用splice方法从updatedTodos中删除指定索引的元素。最后，通过调用setTodos来更新todos数组。

  3. startEditTodo函数用于开始编辑待办事项。它接收一个索引和值作为参数，将索引保存到editIndex状态变量中，并将值保存到editValue状态变量中。

  4. cancelEditTodo函数用于取消编辑待办事项。它通过将editIndex重置为-1和清空editValue来实现。

  5. saveEditTodo函数用于保存编辑后的待办事项。首先，通过展开运算符将todos数组复制到updatedTodos变量中。然后，将editValue保存到updatedTodos数组中指定索引的位置。最后，通过调用setTodos来更新todos数组，并调用cancelEditTodo函数来取消编辑状态。

在组件的返回部分，渲染了一个输入框和一个按钮，用于添加新的待办事项。使用onChange事件监听输入框的值变化，并通过setInputValue将输入框的值保存到inputValue状态变量中。使用onClick事件监听按钮的点击，并调用addTodo函数来添加待办事项。

接下来，使用map方法遍历todos数组，渲染每个待办事项的列表项。对于每个待办事项，如果其索引等于editIndex，则渲染一个包含输入框、保存按钮和取消按钮的编辑状态。

使用onChange事件监听输入框的值变化，并通过setEditValue将输入框的值保存到editValue状态变量中。

使用onClick事件监听保存按钮的点击，并调用saveEditTodo函数来保存编辑后的待办事项。

使用onClick事件监听取消按钮的点击，并调用cancelEditTodo函数来取消编辑状态。如果待办事项的索引不等于editIndex，则渲染一个包含待办事项文本、删除按钮和编辑按钮的非编辑状态。

使用onClick事件监听删除按钮的点击，并调用deleteTodo函数来删除待办事项。

使用onClick事件监听编辑按钮的点击，并调用startEditTodo函数来开始编辑待办事项。

最后，将整个组件包裹在一个div中，并导出TodoList组件。

这只是一个简单的案例,其实代码还可以进行一些优化，例如可以将编辑状态和非编辑状态的逻辑分离成两个子组件，以提高代码的可读性和可维护性。如果你感兴趣的话,可以去完成一下,创作不易,看官给个赞

avatar
文章
阅读
粉丝