تكرار السؤال: …
الإجابة المختصرة
نعرف حالة مركزية تخزن بيانات جميع الخطوات في المكون الأب، ونعرض المكون المقابل لرقم الخطوة الحالية مع تزويده بزر للرجوع والتقدم دون فقدان المدخلات السابقة.
الشرح
يمكن تقسيم النماذج الطويلة إلى خطوات منطقية. يتم التحقق من صحة حقول الخطوة الحالية فقط قبل السماح بالانتقال للخطوة التالية. يتم الاحتفاظ بكامل البيانات المجمعة في كائن موحد، بحيث يتم إرسال الكائن النهائي للخادم فقط في الخطوة الأخيرة.
مثال بالكود
function Wizard() {
const [step, setStep] = useState(1);
const [formData, setFormData] = useState({});
const nextStep = (stepData: object) => {
setFormData(prev => ({ ...prev, ...stepData }));
setStep(s => s + 1);
};
const prevStep = () => setStep(s => Math.max(1, s - 1));
return (
<div>
{step === 1 && <PersonalInfo onNext={nextStep} defaultValues={formData} />}
{step === 2 && <BillingInfo onNext={nextStep} onBack={prevStep} defaultValues={formData} />}
</div>
);
}أخطاء شائعة
- تدمير بيانات الخطوات السابقة عند الرجوع بسبب إعادة تهيئة الـ State المحلية في كل خطوة.