إنشاء مكوّنات نموذج قابلة لإعادة الاستخدام (Creating Reusable Form Components)

الدرس 18 من 21 · دورة TanStack Form الكاملة · 3 دقيقة و40 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع شيفرة هذا الدرس

الفرع: useAppForm-4

[00:02] إذًا بالإضافة إلى — لنغلّق هذه، ربما. فإضافةً إلى مكوّنات الحقول (field components) التي لَدَينا هنا، لَدَينا أيضًا مكوّنات نموذج (form components) كذلك. وهنا يمكننا أن نمرّر مكوّناتٍ متعلقة بالنموذج ذاته لا بمكوّن حقل. مثلًا

[00:16] هذه الأزرار الخاصة بالإرسال. ففي هنا — هذه الأزرار الخاصة بالإرسال — نحن نستخدم form.Subscribe ثم نصيّر أزرارنا وهكذا. وبدلًا من الاضطرار إلى فعل كل ذلك هنا، يمكننا كذلك أن نُجرّد هذا في مكوّنٍ منفصل

[00:30] ونستخدمه هنا مماثلين لما نفعله مع الحقول. ويمكننا فعل ذلك بالتوجّه إلى createFormHook لَدَينا، بإنشاء مكوّنٍ لأزرار الإرسال وتمريره هنا. فلنفعل ذلك. فإذًا في مجلد form الخاص بي هنا، سأقوم

[00:46] بإنشاء ملفٍّ جديد، مكوّنٍ جديد. فلنسمّه SubmitButton.tsx.

[00:57] وفي هنا، فلنشئ مكوّن React جديدًا.

[00:59] ولنذهب الآن إلى نموذجنا ولننسخ الأشياء المتعلقة بزر الإرسال بدءًا من form.Subscribe هنا. هكذا. فلنسخ هذا — أو لنقطعه من هنا — ولنضعه ببساطة هنا.

[01:15] والآن، نحتاج — بالطبع — إلى استيراد بعض الأشياء وهكذا. فلنستورد Button من مجلد UI لَدَينا.

[01:23] حسنًا، أظنّ أنّ هذا هو كل شيء في الواقع. غير أنّه الآن نحتاج إلى امتلاك وصولٍ إلى النموذج، مماثلين لسياق الحقل (field context). تذكّر أنّ لدينا أيضًا سياق النموذج (form context) كذلك، وهو ما نحصل عليه من هنا ونمرّره هنا. إذًا سيكون لدينا

[01:37] الوصول إلى نموذجنا باستخدام سياق النموذج هذا كذلك، ويمكننا الوصول إليه باستخدام الدالة useFormContext.

[01:45] فإذًا هنا يمكننا أن نكتب const form ثم نستدعي useFormContext. عذرًا.

[01:54] useFormContext هكذا.

[01:58] وسيعمل هذا. وبالطبع، يمكن أن يملك هذا المكوّن خصائص (props) لتخصيص الأشياء التي يلزم تخصيصُها هنا. ربّما البيانات التي نرسلها عند الإرسال، وربّما النصّ وهلمّ جرا. غير أنّني

[02:12] سأبقي الأمر بسيطًا فقط. والآن بعد أن أصبح لدينا هذا المكوّن، سأمرّره هنا. فلنعطِه اسمًا.

[02:20] SubmitButton مثلًا، ونمرّر المكوّن الذي عرّفناه للتوّ وهو SubmitButton هكذا.

[02:29] وبفعل ذلك يمكننا أن نعود إلى نموذجنا هنا، وفي النموذج الذي نحصل عليه من useAppForm يجب أن نملك وصولًا إلى هذا المكوّن. غير أنّه كي نستخدم هذا المكوّن يلزمنا أن نوفّر له السياقَ الذي يحتاجه كي

[02:45] الوصول إلى النموذج. ولفعل ذلك يلزمنا أن نلفّ نموذجنا بالكامل بـ form.AppForm. فلنلفّ كل شيء إذًا بـ form.AppForm. وهذا سيضمن أنّ السياق اللازم لمكوّنات النموذج سوف

[03:03] يكون متاحًا، مماثلين لما فعلناه حين استخدمنا حقل form.AppField هنا كي يصبح السياق متاحًا في مكوّناتنا أيضًا.

[03:12] غير أنّه الآن بعدما نفعل هذا، فلنذهب هنا — بعد إغلاق نموذجنا أو قبله — ونستخدم ببساطة form.SubmitButton هكذا.

[03:24] وبفعل هذا، إذا حفظنا الآن فينبغي أن نحصل على أزرارنا من جديد. وسيعمل هذا تمامًا بالطريقة نفسها. فلنحدّث.

[03:32] فلنُرسِل. وكل شيء يعمل تمامًا بالطريقة نفسها، لكن نموذجنا الآن أصغر حجمًا بكثير. ما فعلْناه