CRUD操作后的React更新组件

import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    addTodo(input);
    setInput('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button type="submit">Add Todo</button>
    </form>
  );
}

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

function TodoItem({ todo, onUpdate }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(todo);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onUpdate(editedText);
    setIsEditing(false);
  };

  return (
    <li>
      {isEditing ? (
        <>
          <input value={editedText} onChange={(e) => setEditedText(e.target.value)} />
          <button onClick={handleSave}>Save</button>
        </>
      ) : (
        <>
          {todo}
          <button onClick={handleEdit}>Edit</button>
        </>
      )}
    </li>
  );
}

function TodoItem({ todo, onDelete }) {
  return (
    <li>
      {todo}
      <button onClick={() => onDelete(todo)}>Delete</button>
    </li>
  );
}

import React, { useState, useEffect } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    // 这里可以进行数据获取或其他副作用操作
  }, [todos]);

  const addTodo = (text) => {
    setTodos([...todos, text]);
  };

  const updateTodo = (index, newText) => {
    const newTodos = [...todos];
    newTodos[index] = newText;
    setTodos(newTodos);
  };

  const deleteTodo = (text) => {
    setTodos(todos.filter(todo => todo !== text));
  };

  return (
    <div>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} />
      {todos.map((todo, index) => (
        <TodoItem key={index} todo={todo} onUpdate={(newText) => updateTodo(index, newText)} onDelete={deleteTodo} />
      ))}
    </div>
  );
}