笔记5|青训营

从0到小白
98 阅读3分钟

使用React 实现一个简单的待办事项列表：包含添加、编辑和删除待办事项的功能。

  1. 创建项目结构：使用create-react-app或其他工具创建一个新的React应用。

  2. 组件创建：

    • 创建一个名为TodoList的主组件。这个组件将会管理待办事项的状态和操作。
    • 在TodoList组件中，使用useState来管理待办事项列表的状态。初始化一个空的待办事项数组以及一个用于输入新待办事项的字符串状态。
    • 在TodoList组件中，渲染一个输入框、一个"Add"按钮和一个显示待办事项的列表。

  3. 添加待办事项：

    • 在输入框中，绑定value属性到用于输入新待办事项的状态。
    • 为输入框添加一个onChange事件处理函数，以更新新待办事项的状态。
    • 在"Add"按钮上绑定一个onClick事件处理函数，当点击按钮时，将新待办事项添加到待办事项列表中，然后清空输入框。

  4. 编辑待办事项：

    • 为每个待办事项列表项创建一个编辑按钮。
    • 当点击编辑按钮时，使用useState来管理当前正在编辑的待办事项的索引，同时将当前待办事项的文本设置到输入框中，以便进行编辑。
    • 修改"Add"按钮的文本为"Update"，并将其功能用于更新待办事项。

  5. 删除待办事项：

    • 为每个待办事项列表项创建一个删除按钮。
    • 当点击删除按钮时，根据待办事项的索引从待办事项列表中移除该项。

  6. 拆分组件：

    • 将每个待办事项列表项拆分成一个名为TodoItem的子组件，该组件接收待办事项的文本、编辑和删除函数作为属性。

  7. 样式：

    • 使用CSS或CSS框架（如Bootstrap）为应用程序添加基本样式，以使其看起来更加美观和用户友好。

  8. 运行应用：

    • 使用npm start命令运行你的React应用，然后在浏览器中查看待办事项列表的效果。

已安装Node.js和npm（Node包管理器）后，可以按照以下步骤创建React应用：

步骤1：创建一个新的React应用 在命令行中运行以下命令，创建一个新的React应用：

npx create-react-app todo-list-app

步骤2：进入应用目录并修改代码 进入创建的应用目录：

cd todo-list-app

现在，可以编辑 src/App.js 文件，将以下代码添加到文件中：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');
  const [editingIndex, setEditingIndex] = useState(-1);

  const addTodo = () => {
    if (newTodo.trim() === '') {
      return;
    }
    if (editingIndex === -1) {
      setTodos([...todos, newTodo]);
    } else {
      const updatedTodos = [...todos];
      updatedTodos[editingIndex] = newTodo;
      setTodos(updatedTodos);
      setEditingIndex(-1);
    }
    setNewTodo('');
  };

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

  const deleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>
        {editingIndex === -1 ? 'Add' : 'Update'}
      </button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => editTodo(index)}>Edit</button>
            <button onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

步骤3：运行应用 运行以下命令启动应用：

npm start

现在，能够在浏览器中看到一个简单的待办事项列表应用，可以在输入框中添加待办事项，点击 "Add" 按钮来添加，点击 "Edit" 按钮来编辑，点击 "Delete" 按钮来删除。

avatar
文章
阅读
粉丝