React 实现一个简单的待办事项列表|青训营

在现代前端开发中，React作为一种流行的JavaScript库，被广泛用于构建交互性强、用户友好的Web应用程序。在本篇文章中，我们将使用React来创建一个简单的代办事项列表应用，展示如何使用React的状态管理、组件化和事件处理等核心概念。

项目概述

我们的目标是创建一个代办事项列表，允许用户添加、编辑和删除任务。用户可以输入任务名称，点击“Add”按钮添加新任务，对现有任务进行编辑，以及删除任务。我们将会使用React的状态管理来实现这些功能。

项目结构

首先，让我们了解一下项目的文件结构：

- src
  - components
    - App.js
  - index.js

我们的项目只有一个主要的组件 App.js，用于渲染整个应用。我们将在这个组件中实现代办事项列表的功能。

实现步骤

设置初始状态

我们使用 useState 钩子来管理应用的状态。在 App 组件中，我们设置了以下状态：

todos：存储代办事项的数组。
inputValue：存储输入框的值。
editingIndex：存储当前正在编辑的任务的索引。
editingValue：存储正在编辑的任务的值。

import React, { useState } from 'react';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [editingIndex, setEditingIndex] = useState(null);
  const [editingValue, setEditingValue] = useState('');

  // ...
}

添加新任务

当用户在输入框中输入任务并点击“Add”按钮时，我们将新任务添加到 todos 数组中，并清空输入框。

const addTodo = () => {
  if (inputValue.trim() !== '') {
    setTodos([...todos, inputValue]);
    setInputValue('');
  }
};

编辑任务

点击“Edit”按钮后，我们将当前任务的索引存储到 editingIndex 中，并将当前任务的值存储到 editingValue 中。编辑完成后，用户可以点击“Save”按钮来保存修改。

const editTodo = (index) => {
  setEditingIndex(index);
  setEditingValue(todos[index]);
};

const saveTodo = () => {
  const newTodos = [...todos];
  newTodos[editingIndex] = editingValue;
  setTodos(newTodos);
  setEditingIndex(null);
  setEditingValue('');
};

删除任务

点击“Delete”按钮后，我们从 todos 数组中移除对应索引的任务。

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

渲染UI

最后，我们将渲染代办事项列表的UI。根据 editingIndex 来决定显示任务内容还是编辑输入框和按钮。

<ul>
  {todos.map((todo, index) => (
    <li key={index}>
      {index === editingIndex ? (
        <>
          <input
            type="text"
            value={editingValue}
            onChange={(e) => setEditingValue(e.target.value)}
          />
          <button onClick={saveTodo}>Save</button>
        </>
      ) : (
        <>
          {todo}
          <button onClick={() => editTodo(index)}>Edit</button>
          <button onClick={() => deleteTodo(index)}>Delete</button>
        </>
      )}
    </li>
  ))}
</ul>

总结

通过这个简单的代办事项列表应用，我们学习了如何在React中使用状态管理、事件处理和条件渲染等核心概念。这个实践项目为我们提供了一个很好的入门机会，让我们更深入地理解了React框架的基本原理。当然，这只是一个简单的示例，实际的项目中可能需要更复杂的状态管理和组件交互，但这个例子可以帮助我们打下坚实的基础。

React 实现一个简单的待办事项列表 | 青训营