如何在React中制作可编辑的卡片？

import React, { useState } from 'react';

const EditableCard = () => {
  const [isEditing, setIsEditing] = useState(false);
  const [cardContent, setCardContent] = useState('Card content');

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

  const handleSaveClick = () => {
    setIsEditing(false);
  };

  const handleInputChange = (e) => {
    setCardContent(e.target.value);
  };

  return (
    <div className="card">
      {isEditing ? (
        <input
          type="text"
          value={cardContent}
          onChange={handleInputChange}
        />
      ) : (
        <p>{cardContent}</p>
      )}
      {isEditing ? (
        <button onClick={handleSaveClick}>Save</button>
      ) : (
        <button onClick={handleEditClick}>Edit</button>
      )}
    </div>
  );
};

export default EditableCard;