المعلومات الوصفية للحقول (Fields Meta Data)

الدرس 4 من 21 · دورة TanStack Form الكاملة · 4 دقيقة و41 ثانية

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

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

الفرع: field-meta

[00:01] نُلقي نظرة على هذه المعلومات الوصفية (meta) التي نحصل عليها لكل حقل وعما تعنيه بالضبط. إذًا يمكننا استخدام أدوات التطوير (dev tools). غير أنّه بالنسبة ليّ، عندما تكون أدوات التطوير مفتوحة لديّ وأُغيّر شيئًا ما، يصبح الحقل بطيئًا

[00:15] قليلًا. إذًا لن أستخدم هذه الأدوات في الوقت الحالي. ما سأفعله هو أنّني سأعرض ببساطة المعلومات الوصفية في ترميزنا (markup)، وذلك بالذهاب إلى هنا، وربما عندما نصيّر (render) input حقلنا، فلنعرض كذلك

[00:29] المعلومات الوصفية لهذا الحقل، ربما بالذهاب إلى هنا وعرض هذا باستخدام JSON.stringify. إذًا JSON.stringify ثم نمرّر حقلنا. هذا — عذرًا — field. وسيتواجد هذا في state ثم في meta.

[00:44] ولكي يبدو هذا جميلًا، يلزمنا تمرير null هنا وقيمة اثنين لعرض التبويب (tab width). كما يلزمنا أيضًا أن نغلّف هذا في وسم pre هكذا.

[00:53] وبتوفّر هذا، ستتوفّر لدينا معلومات هذا الحقل في هنا.

[00:59] لكن الآن فلنجدّد الصفحة. فلنبدأ من الصفر. ولنناقش بعض هذه الأمور وما تعنيه. وبالطبع قد تكون مألوفًا بهذه المصطلحات أصلًا. فمثلاً ستكون isTouched هي false مبدئيًا إلى أن نحصُل

[01:13] إمّا على تغيير قيمتنا أو على مجرد التركيز على قيمتنا والابتعاد (blur). إذًا إذا ذهبنا إلى هنا وغيّرنا شيئًا، فكما ترى صارت isTouched هي true الآن. غير أنّه فلنجدّد. إذا قمنا بمجرد التركيز والابتعاد فستكون isTouched هي true أيضًا حتى لو

[01:30] لم نغيّر القيمة. ولدينا كذلك isBlurred وهي مفهومة من ذاتها تمامًا. إذا ابتعدنا — إذا كنّا مركّزين على الحقل ثم ابتعدنا فستكون true. ثم لدينا كذلك isDirty التي ستكون true فقط

[01:46] عندما نغيّر قيمة الحقل.

[01:49] إذًا إذا أجرينا بعض التغييرات هنا فستكون isDirty هي true. وحتى لو أعدنا قيمتنا إلى مكانها — إلى القيمة الأصلية أو القيمة الافتراضية — فستبقى isDirty هي true بما أنّها تغيّرت مرة واحدة على الأقل. حتى لو كانت قيمتها الآن

[02:05] هي القيمة الافتراضية، فستبقى dirty. أما isPristine فهي عكس isDirty. ستكون true مبدئيًا. وبمجرد أن نغيّر شيئًا ما في حقلنا ستصبح false.

[02:18] سنتجاوز isValid في الوقت الحالي.

[02:19] هذا مرتبط بالتحقق من الصحة (validation) الذي سنناقشه لاحقًا. غير أنّه لدينا كذلك isDefaultValue. يمكن استخدام هذا إذا احتجت إلى فحص أنّ قيمة الحقل هي في الوقت الحالي القيمة الافتراضية حتى لو سبق أن لُمِست (touched). إذًا حتى لو

[02:32] كانت القيمة dirty غير أنّها تضمّ القيمة الافتراضية، فسيكون هذا true.

[02:37] إذًا يمكننا فعل شيء ما هنا. والآن هو false. غير أنّه، بخلاف isDirty، إذا أعدنا حقلنا إلى القيمة الافتراضية فسيصير هذا true الآن. وهكذا يمكننا أن نعرف ما إن كانت قيمتنا هي القيمة الافتراضية. ينبغي أن نعتمد على

[02:52] هذا لا على isDirty. وهذا كل شيء في الوقت الحالي. أما سائر المعلومات الوصفية فسنُلقي نظرة عليها لاحقًا.

[02:59] غير أنّه ما يمكننا فعله الآن: إضافةً إلى توفّر هذه المعلومات على مستوى الحقل (field level). إذًا تذكّر أنّنا نعرض هذه المعلومات حاليًا في الحقل الخاص بالاسم الأول لدينا، لكن يمكننا كذلك الوصول إلى المعلومات نفسها في

[03:14] مستوى النموذج (form level) كذلك. ففي كائن form (object) هذا تتوفّر لدينا أيضًا بعض المعلومات. ففلنضيف على سبيل الاحتمال وسم pre آخر هنا.

[03:23] غير أنّه هذا الوسم فلنضفه قبل النموذج وسيعرض form.state.

[03:29] إذا حفظنا هذا فسنحصل — وكما ترى — على الكثير من الأشياء هنا. فهو يصل إلى نهايته هنا ويبدأ من هنا، ومن ضمنها القيم، ويتوفّر لدينا أيضًا معلومات وصفية لكل حقل.

[03:42] إذًا نمتلك معلوماتنا الوصفية الخاصة بالاسم الأول، ونمتلك الأشياء نفسها التي نمتلكها على مستوى الحقل.

[03:48] غير أنّه فلنحاول تغيير شيئًا هنا. إذًا الآن يُفترض أن تكون isDirty مثلًا true. غير أنّه حين ننظر إليها هنا، أو — عذرًا — ربما يلزمنا فقط أن نُجدد الصفحة على ما أظنّ.

[04:01] إذًا مبدئيًا ستكون isDirty مثلًا false هنا، وفي — في مستوى النموذج كذلك، fieldMeta لن تضم أي شيء مبدئيًا. الآن إذا غيّرنا شيئًا هنا تصير isDirty تساوي true وستبقى fieldMeta

[04:17] كائنًا فارغًا. ولم يتحدّث عندما نغيّر شيئًا في حقلنا.

[04:23] وهذا لأنّ TanStack Form سيتجنّب، افتراضيًا، حالات إعادة التصيير (rerenders) لا لزوم لها لمكوّن (component) نموذجك عندما يتغيّر شيء في نموذجك. إذًا إذا احتجت إلى الاعتماد على شيء داخل كائن form هذا، فيلزمك بطريقةٍ ما

[04:38] الاشتراك فيه (subscribe)، وهذا موضوعنا التالي. فلنقل الآن أنّنا نحتاج إلى