import React, { useState } from "react"; interface SaveButtonProps { onSave: (title: string) => void; initialTitle?: string; // 添加初始标题属性 } export function SaveWithInput({ onSave, initialTitle = '未命名画布' }: SaveButtonProps) { const [isEditing, setIsEditing] = useState(false); const [titleInput, setTitleInput] = useState(initialTitle); // 使用initialTitle初始化 const handleTitleChange = (event: React.ChangeEvent) => { setTitleInput(event.target.value); }; const handleClickTitle = () => { setIsEditing(true); }; const handleBlur = () => { if (titleInput.trim() === '') { alert('请输入标题!'); } else { setIsEditing(false); onSave(titleInput); } }; return (
{isEditing ? ( // 当处于编辑状态时,显示输入框 ) : ( // 默认显示未命名画布文字,点击时切换到编辑状态 {titleInput} )}
); }