实践笔记：使用React实现待办事项列表应用｜青训营引言： React是一种流行的JavaScript库，用于构建用

引言： React是一种流行的JavaScript库，用于构建用户界面。在本实践笔记中，我们将使用React来实现一个简单的待办事项列表应用，用户可以添加、编辑和删除待办事项。

步骤一：设置环境和项目结构

首先，确保您的项目环境中已经安装了Node.js和npm。然后，创建一个新的React应用程序。

确保Node.js和npm已安装。
使用命令行创建一个新的React应用程序：npx create-react-app todo-list-app。
进入项目文件夹：cd todo-list-app。

npx create-react-app todo-list-app
cd todo-list-app

步骤二：编写组件

在src文件夹下，创建一个名为TodoList.js的组件文件。

引入React和useState： 首先需要在组件文件中引入React库和useState钩子，后者用于管理组件的状态。
设置初始状态： 使用useState，为待办事项列表和输入框的值设置了初始状态。初始状态为空数组和空字符串。
处理添加待办事项： 编写了一个处理添加待办事项的函数handleAddTodo。这个函数会在用户点击"Add"按钮时触发。它会检查输入框的值是否为空，如果不为空，就将新的待办事项添加到现有的待办事项列表中，然后清空输入框的值。
处理编辑待办事项： 编写了一个处理编辑待办事项的函数handleEditTodo。当用户在输入框中修改待办事项时，这个函数会更新对应索引位置的待办事项。
处理删除待办事项： 编写了一个处理删除待办事项的函数handleDeleteTodo。当用户点击"Delete"按钮时，这个函数会从待办事项列表中移除指定索引位置的待办事项。

import React, { useState } from 'react';

const TodoList = () => {
  // 使用useState钩子来管理状态
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  // 处理添加待办事项的函数
  const handleAddTodo = () => {
    if (inputValue) {
      // 将新的待办事项添加到todos数组中
      setTodos([...todos, inputValue]);
      // 清空输入框
      setInputValue('');
    }
  };

  // 处理编辑待办事项的函数
  const handleEditTodo = (index, newValue) => {
    // 创建副本，以便修改数据
    const updatedTodos = [...todos];
    // 替换指定索引的待办事项
    updatedTodos[index] = newValue;
    // 更新状态
    setTodos(updatedTodos);
  };

  // 处理删除待办事项的函数
  const handleDeleteTodo = (index) => {
    // 使用filter过滤掉要删除的待办事项
    const updatedTodos = todos.filter((_, i) => i !== index);
    // 更新状态
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      {/* 输入框用于输入待办事项 */}
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      {/* 添加按钮 */}
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {/* 遍历显示待办事项 */}
        {todos.map((todo, index) => (
          <li key={index}>
            {/* 输入框用于编辑待办事项 */}
            <input
              type="text"
              value={todo}
              onChange={(e) => handleEditTodo(index, e.target.value)}
            />
            {/* 删除按钮 */}
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

步骤三：使用组件

在src文件夹下的App.js文件中使用TodoList组件。

引入TodoList组件： 在App.js文件中，我们使用import语句引入了TodoList组件。
在页面中使用TodoList组件： 我们将<TodoList />组件放置在<div className="App">中，这样它就成为了应用的一部分，会在页面中渲染出来。

import React from 'react';
import TodoList from './TodoList';
import './App.css';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

步骤四：运行应用

运行以下命令启动应用：

npm start

现在，您可以在浏览器中查看并使用待办事项列表应用。

结论： 通过使用React，我们成功地实现了一个简单的待办事项列表应用。用户可以添加、编辑和删除待办事项，这个小应用展示了React在构建交互性用户界面方面的强大能力。您可以在这个基础上继续扩展和优化应用，添加更多功能和特性。这个实践项目可以帮助您更好地理解React的基本用法和组件之间的交互。

实践笔记：使用React实现待办事项列表应用｜ 青训营

实践笔记：使用React实现待办事项列表应用｜青训营