使用React 实现一个简单的待办事项列表｜ 青训营

使用React实现一个简单的待办事项列表的代码示例，实现了添加、编辑和删除待办事项的功能：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleNewTodoChange = (e) => {
    setNewTodo(e.target.value);
  };

  const handleNewTodoSubmit = (e) => {
    e.preventDefault();
    if (!newTodo.trim()) {
      return;
    }
    setTodos([...todos, { id: Date.now(), text: newTodo }]);
    setNewTodo('');
  };

  const handleTodoDelete = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const handleTodoEdit = (id, newText) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, text: newText } : todo
      )
    );
  };

  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={handleNewTodoSubmit}>
        <input
          type="text"
          placeholder="Enter new todo"
          value={newTodo}
          onChange={handleNewTodoChange}
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onDelete={handleTodoDelete}
            onEdit={handleTodoEdit}
          />
        ))}
      </ul>
    </div>
  );
}

function TodoItem({ todo, onDelete, onEdit }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState('');

  const handleEditInputChange = (e) => {
    setEditText(e.target.value);
  };

  const handleEditFormSubmit = (e) => {
    e.preventDefault();
    if (!editText.trim()) {
      return;
    }
    onEdit(todo.id, editText);
    setIsEditing(false);
  };

  const handleEditCancelClick = () => {
    setIsEditing(false);
    setEditText(todo.text);
  };

  return (
    <li>
      {isEditing ? (
        <form onSubmit={handleEditFormSubmit}>
          <input
            type="text"
            value={editText}
            onChange={handleEditInputChange}
          />
          <button type="submit">Save</button>
          <button type="button" onClick={handleEditCancelClick}>
            Cancel
          </button>
        </form>
      ) : (
        <>
          <span>{todo.text}</span>
          <button type="button" onClick={() => setIsEditing(true)}>
            Edit
          </button>
          <button type="button" onClick={() => onDelete(todo.id)}>
            Delete
          </button>
        </>
      )}
    </li>
  );
}

export default TodoList;

在这个示例中，我们使用了React的Hooks，利用useState来管理组件的状态。TodoList组件中包含了一个表单来添加新的待办事项，一个ul来展示所有的待办事项，以及一个TodoItem组件来展示每个待办事项的详细信息。

在TodoItem组件中，我们使用了isEditing状态来判断是否处于编辑状态，如果是，就展示一个表单来修改待办事项的文本；否则，展示待办事项的文本和编辑和删除按钮。当用户点击编辑按钮时，我们设置isEditing为true，进入编辑状态；当用户点击删除按钮时，我们调用onDelete回调函数来删除该待办事项；当用户点击保存按钮时，我们调用onEdit回调函数来修改该待办事项的文本，并设置isEditing为false，退出编辑状态。