React实现待办事项列表 | 青训营

Zrud
80 阅读3分钟

项目简介

在这个技术实践中，我们将使用React来实现一个待办事项列表。该列表将允许用户添加、删除和编辑待办事项，以便更好地管理任务和计划。

技术栈

  • React
  • JSX
  • useState钩子

步骤分析

步骤1：初始化项目和组件

我们首先需要创建一个新的React项目，并创建一个名为TodoList的组件，作为我们的待办事项列表的主要组件。

步骤2：设置初始状态和事件处理函数

在TodoList组件中，我们使用useState钩子来创建一些状态变量，包括todos、text和update。

  • todos: 用于存储待办事项的数组
  • text: 用户输入待办事项文本的输入框的值
  • update: 用于保存待办事项的编辑文本

我们还需要编写事件处理函数:

  • addTodo：用于添加待办事项到列表中
  • deleteTodo：用于删除待办事项
  • editTodo：用于启动待办事项的编辑模式
  • handleEditChange：用于处理编辑输入框的变化
  • saveTodo：用于保存编辑后的待办事项

步骤3：渲染TodoList组件

在组件的render函数中，我们将渲染一个包含待办事项的列表。遍历todos数组中的每个事项，并根据是否处于编辑模式渲染不同的内容。

步骤4：处理用户输入和交互

为了实现用户输入待办事项的功能，我们在render函数中渲染一个文本输入框和一个"Add"按钮。文本输入框的值通过useState钩子与text状态变量绑定，当用户输入时，我们将更新text的值。

为了实现待办事项的删除和编辑功能，我们在每个待办事项的li元素中渲染一个"Delete"按钮和一个"Edit"按钮。当用户点击"Delete"按钮时，我们将调用deleteTodo函数删除相应的待办事项。当用户点击"Edit"按钮时，我们将调用editTodo函数来启动编辑模式。

步骤5：处理编辑模式

在编辑模式下，我们在li元素中渲染一个编辑输入框和一个"Save"按钮。编辑输入框的值通过useState钩子与对应待办事项的text属性绑定，当用户输入时，我们将更新对应待办事项的text属性。

当用户点击"Save"按钮时，我们将调用saveTodo函数来保存编辑后的待办事项，并将对应待办事项的isEditing属性设置为false，以退出编辑模式。

步骤6：完成实践

完成上述步骤后，我们的React待办事项列表就已经实现了。可以通过添加、删除和编辑待办事项来进行任务管理和计划安排。

实现代码如下

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');
  const [update, setupdate] = useState('');
  // 添加待办事项的函数
  const addTodo = (text) => {
    const newTodo = { id: Date.now(), text };
    setTodos([...todos, newTodo]);
  };

  // 删除待办事项的函数
  const deleteTodo = (id) => {
    const updatedTodos = todos.filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  };
// 添加编辑待办事项的函数
const editTodo = (id) => {
  const updatedTodos = todos.map((todo) => {
    if (todo.id === id) {
      return { ...todo, isEditing: true };
    }
    return todo;
  });
  setTodos(updatedTodos);
};

// 处理编辑输入框的变化
const handleEditChange = (value, id) => {
  const updatedTodos = todos.map((todo) => {
    if (todo.id === id) {
      return { ...todo, text: value };
    }
    return todo;
  });
  setTodos(updatedTodos);
};

// 保存编辑后的待办事项
const saveTodo = (id) => {
  const updatedTodos = todos.map((todo) => {
    if (todo.id === id) {
      return { ...todo, isEditing: false };
    }
    return todo;
  });
  setTodos(updatedTodos);
};
  return (
    <div className='TodoList'>
      <h2>Todo List</h2>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => addTodo(text)}>Add</button>
      <ul type="none">
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.isEditing ? (
            <>
              <input
                type="text"
                value={todo.text}
                onChange={(e) => handleEditChange(e.target.value, todo.id)}
              />
              <button onClick={() => saveTodo(todo.id)}>Save</button>
            </>
          ) : (
            <>
              <input
                type="text"
                value={todo.text}
                readOnly={true}
              />
              <button className="edit" onClick={() => editTodo(todo.id)}>Edit</button>
              <button onClick={() => deleteTodo(todo.id)}>Delete</button>
            </>
          )}
        </li>
      ))}
      </ul>
    </div>
  );
}

export default TodoList;

总结

在这个技术实践中，我们使用React和useState钩子来实现了一个简单的待办事项列表。我们学习了如何处理用户输入、添加、删除和编辑待办事项，并使用条件渲染技术来动态显示不同的内容。这个实践项目提供了一个良好的练习，以了解如何使用React构建交互式组件和管理组件状态。

avatar
文章
阅读
粉丝