待办事项列表 |青训营

功能特性

1. 添加待办事项： 通过输入框添加新的待办事项，点击 "Add Todo" 按钮即可将事项添加到列表中。
2. 编辑待办事项： 可以通过点击事项后的 "Edit" 按钮来编辑已存在的待办事项。
3. 删除待办事项： 每个事项后面都有一个 "Delete" 按钮，点击它可以将该事项从列表中删除。

使用指南

1. 在输入框中输入一个待办事项的描述。

2. 点击 "Add Todo" 按钮将该事项添加到列表中。

3. 列表中的每个事项后面都有 "Edit" 和 "Delete" 按钮。

   • 点击 "Edit" 按钮，可以将事项的描述放入输入框中进行编辑，然后点击 "Edit Todo" 保存修改。
   • 点击 "Delete" 按钮，可以从列表中删除该事项。

4. 你可以继续添加、编辑和删除待办事项，以满足你的需求。 以下是一个简单的示例，演示如何使用React来创建一个待办事项列表，用户可以添加、编辑和删除待办事项。

首先，你需要确保已经在项目中安装了React和ReactDOM。如果没有安装，可以使用以下命令安装：

示例代码

npm install react react-dom

然后，创建一个名为 TodoApp.js 的组件文件，并添加以下代码：

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [currentTodo, setCurrentTodo] = useState('');
  const [editingIndex, setEditingIndex] = useState(null);

  const addTodo = () => {
    if (currentTodo.trim() !== '') {
      if (editingIndex !== null) {
        // If editing, update the existing todo
        const updatedTodos = [...todos];
        updatedTodos[editingIndex] = currentTodo;
        setTodos(updatedTodos);
        setEditingIndex(null);
      } else {
        // If not editing, add a new todo
        setTodos([...todos, currentTodo]);
      }
      setCurrentTodo('');
    }
  };

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

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

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={currentTodo}
        onChange={(e) => setCurrentTodo(e.target.value)}
      />
      <button onClick={addTodo}>
        {editingIndex !== null ? 'Edit Todo' : 'Add Todo'}
      </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 TodoApp;

然后，在你的主应用文件中（通常是 index.js）使用 ReactDOM.render 渲染 TodoApp 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import TodoApp from './TodoApp';

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

确保在你的HTML文件中有一个带有 id="root" 的元素，这将是应用程序渲染的根目标。