代办事项列表（React）| 青训营代办事项列表是日常生活中常见的工具，用于记录和跟踪待办任务。借助现代前端开发技术，我

代办事项列表是日常生活中常见的工具，用于记录和跟踪待办任务。借助现代前端开发技术，我们可以轻松地构建一个交互式的代办事项列表应用，让用户能够添加、编辑和删除任务。在本笔记中，我们将探讨如何使用React框架创建一个简单而功能丰富的代办事项列表应用。

首先，创建一个新的React组件文件，例如TodoList.js

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

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [currentTodo, setCurrentTodo] = useState('');
  const [editingIndex, setEditingIndex] = useState(-1);

  const addTodo = () => {
    if (currentTodo.trim() !== '') {
      if (editingIndex !== -1) {
        // Editing existing todo
        const updatedTodos = todos.map((todo, index) =>
          index === editingIndex ? currentTodo : todo
        );
        setTodos(updatedTodos);
        setEditingIndex(-1);
      } else {
        // Adding new todo
        setTodos([...todos, currentTodo]);
      }
      setCurrentTodo('');
    }
  };

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

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

  return (
    <div className="todo-container">
      <h1>Todo List</h1>
      <div className="add-todo">
        <input
          type="text"
          placeholder="Enter a todo"
          value={currentTodo}
          onChange={(e) => setCurrentTodo(e.target.value)}
        />
        <button onClick={addTodo}>
          {editingIndex !== -1 ? 'Save Edit' : 'Add Todo'}
        </button>
      </div>
      <ul className="todo-list">
        {todos.map((todo, index) => (
          <li key={index}>
            <span className="todo-text">{todo}</span>
            <button className="edit-button" onClick={() => editTodo(index)}>Edit</button>
            <button className="delete-button" onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

创建一个名为TodoList.css的文件，将以下CSS代码添加到文件中

.todo-container {
  text-align: center;
  margin: 2rem auto;
  width: 80%;
  max-width: 600px;
  border: 1px solid #ccc;
  padding: 1rem;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.add-todo {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ccc;
}

.todo-text {
  flex: 1;
}

.edit-button,
.delete-button {
  padding: 0.2rem 0.5rem;
  border: none;
  cursor: pointer;
}

.edit-button {
  background-color: #ffc107;
}

.delete-button {
  background-color: #f44336;
  color: #fff;
}

.edit-button:hover,
.delete-button:hover {
  opacity: 0.8;
}

最后，将TodoList.js组件集成到你的应用中，例如在App.js文件中

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

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

export default App;

需要添加到HTML文件中的代码。将以下HTML代码添加到你的public/index.html文件中，这是React应用的入口HTML文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Todo List App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

这是一个基本的HTML结构，其中<div id="root"></div>是React应用将会渲染到的容器。React会通过JavaScript将组件渲染到这个根元素中。

确保你已经在项目中安装了必要的React相关依赖，并且有一个入口文件（通常是src/index.js），将React应用渲染到这个根元素中。

如果应用运行出现空白的情况，可能有几个原因导致这种情况发生。以下是一些常见的排查步骤，帮助你找出问题所在：

检查控制台错误: 打开浏览器的开发者工具（通常是按下F12键或右键点击页面然后选择"检查"），在"Console"选项卡中查看是否有任何错误信息。错误信息可以帮助你确定问题的根本原因。
检查文件路径: 确保你的组件文件、CSS文件和HTML文件的路径设置正确。确保这些文件都位于正确的位置，并且文件路径在代码中正确引用。
检查是否正确渲染组件: 确保你的React应用正确渲染了App组件（或其他包含TodoList组件的父组件）。在你的src/index.js文件中，你需要使用ReactDOM.render()将组件渲染到根元素中，例如：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // 或其他包含TodoList组件的父组件

ReactDOM.render(<App />, document.getElementById('root'));

4.检查是否正确引入样式文件: 确保你在index.js或父组件中正确引入了CSS样式文件，例如：

import './TodoList.css'; // 确保路径正确

检查代码逻辑错误: 仔细检查你的React组件代码，确保没有语法错误、逻辑错误或拼写错误。特别是在事件处理函数中，确保没有误用变量、函数名等。
清除缓存: 有时候浏览器可能会缓存旧的代码，尝试清除浏览器缓存或在新的隐私窗口中打开应用程序。