React 实现简单的待办事项列表 | 青训营使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事

使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项

一个简单的待办事项列表可以包含以下要素：

待办事项输入框：用户可以在输入框中输入待办事项的内容，并按下回车键或点击按钮将其添加到列表中。
待办事项列表：显示用户添加的待办事项。每个待办事项通常会有一个复选框用于标记完成与否，以及一个文本框显示具体的事项内容。
添加待办事项功能：用户可以通过输入框将待办事项添加到列表中。当用户输入待办事项后，可以按下回车键或点击添加按钮来触发添加操作。添加操作会将新的待办事项添加到列表的末尾，并清空输入框。
删除待办事项功能：用户可以点击每个待办事项旁边的删除按钮来删除相应的事项。删除操作会将该待办事项从列表中移除。
标记完成功能：用户可以通过点击待办事项旁边的复选框来标记事项的完成与否。标记完成后，事项通常会以一种不同的样式显示，以表示已完成。
样式和布局：为了更好的用户体验，待办事项列表通常会使用一些样式和布局来使其易于阅读和操作。可以使用 CSS 来设置列表的背景颜色、字体样式、边框和间距等。当使用 React 实现一个简单的待办事项列表时，我们可以通过构建一个父组件和多个子组件来实现不同的功能。

首先，我们创建一个名为 TodoApp 的父组件，它将负责管理待办事项的状态和操作。在该组件中，我们会有一个输入框用于添加待办事项，以及一个待办事项列表。

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]); // 用于存储待办事项

  const [textInput, setTextInput] = useState(''); // 输入框的文本

  // 添加待办事项
  const addTodo = () => {
    if (textInput.trim() !== '') {
      const newTodo = {
        id: Date.now(),
        text: textInput,
      };
      
      setTodos([...todos, newTodo]);
      setTextInput('');
    }
  };

  // 删除待办事项
  const deleteTodo = (id) => {
    const updatedTodos = todos.filter(todo => todo.id !== id);
    setTodos(updatedTodos);
  };

  // 编辑待办事项
  const editTodo = (id, newText) => {
    const updatedTodos = todos.map(todo => {
      if (todo.id === id) {
        return { ...todo, text: newText };
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={textInput}
        onChange={e => setTextInput(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <TodoItem
            key={todo.id}
            todo={todo}
            deleteTodo={deleteTodo}
            editTodo={editTodo}
          />
        ))}
      </ul>
    </div>
  );
}

接下来，我们需要创建一个名为 TodoItem 的子组件来显示单个待办事项，并提供编辑和删除功能。

import React, { useState } from 'react';

function TodoItem({ todo, deleteTodo, editTodo }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState(todo.text);

  // 切换编辑状态
  const toggleEdit = () => {
    setIsEditing(!isEditing);
    setEditText(todo.text);
  };

  // 保存编辑
  const saveEdit = () => {
    if (editText.trim() !== '') {
      editTodo(todo.id, editText);
      setIsEditing(false);
    }
  };

  return (
    <li>
      {isEditing ? (
        <>
          <input
            type="text"
            value={editText}
            onChange={e => setEditText(e.target.value)}
          />
          <button onClick={saveEdit}>Save</button>
        </>
      ) : (
        <>
          <span>{todo.text}</span>
          <button onClick={toggleEdit}>Edit</button>
          <button onClick={() => deleteTodo(todo.id)}>Delete</button>
        </>
      )}
    </li>
  );
}

最后，我们将 TodoApp 组件渲染到 DOM 中。

import React from 'react';
import ReactDOM from 'react-dom';

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

我们需要使用 JavaScript 来实现添加、编辑和删除待办事项的功能。这里将使用事件委托将事件处理程序附加到父元素，以处理动态添加的列表项。

<!-- ... -->
<ul class="todo-list">
  <!-- 待办事项列表 -->
</ul>

<script>
  // 获取 DOM 元素
  const todoInput = document.querySelector('.todo-input');
  const todoList = document.querySelector('.todo-list');

  // 添加待办事项
  function addTodo() {
    const text = todoInput.value.trim();
    if (text !== '') {
      const li = document.createElement('li');
      li.className = 'todo-item';
      li.innerHTML = `
        <input type="checkbox">
        <span class="text">${text}</span>
        <button class="delete-btn">Delete</button>
      `;
      todoList.appendChild(li);
      todoInput.value = '';
    }
  }

  // 删除待办事项
  function deleteTodo() {
    const listItem = this.closest('.todo-item');
    listItem.remove();
  }

  // 事件委托，监听点击事件
  todoList.addEventListener('click', function (event) {
    if (event.target.classList.contains('delete-btn')) {
      deleteTodo.call(event.target);
    }
  });

  // 监听输入框的回车键按下事件，添加待办事项
  todoInput.addEventListener('keydown', function (event) {
    if (event.key === 'Enter') {
      addTodo();
    }
  });
</script>
<!-- ... -->

通过以上代码，我们添加了一个 <ul> 元素作为待办事项列表的容器，并使用 JavaScript 动态添加和删除待办事项

通过上述代码，我们实现了一个简单的待办事项列表。用户可以在输入框中添加待办事项，并且可以编辑和删除已有的待办事项。每个待办事项都有一个独特的 ID 用于标识。