إعادة استخدام النماذج على React

تحية!

لدينا لوحة إدارة والعديد من النماذج في BCS ، ولكن في مجتمع React لا توجد طريقة مقبولة بشكل عام - كيفية تصميمها لإعادة استخدامها. لا يحتوي دليل Facebook الرسمي على معلومات مفصلة حول كيفية التعامل مع النماذج في ظروف حقيقية ، حيث يلزم التحقق من الصحة وإعادة الاستخدام. يستخدم شخص ما صيغة الإعادة أو النموذج أو الصيغة النهائية أو حتى يكتب الحل الخاص به.


في هذه المقالة سوف نعرض أحد الخيارات للعمل مع النماذج على React. سيكون مجموعتنا كالتالي: React + formik + Typescript. سوف نظهر:

• ما يجب أن تفعله عنصر.
• التكوين والحقول والتحقق من الصحة على مستوى الدعائم.
• كيفية جعل شكل قابلة لإعادة الاستخدام.
• تعظيم العارض.
• من طريقتنا غير مريح.

مع مهمة العمل الجديدة ، علمنا أننا سنحتاج إلى إنشاء 15-20 أشكالًا مماثلة ، وقد يكون هناك الكثير منها افتراضيًا. كان لدينا نموذج ديناصور واحد على التكوين ، والذي عمل مع البيانات من "المتجر" ، وأرسل إجراءات لحفظ وتنفيذ الطلبات من خلال `sagas`. كانت رائعة ، والقيمة التجارية. لكنه كان بالفعل غير قابل للتوسيع وغير قابلة لإعادة الاستخدام ، فقط مع رمز الفقراء وإضافة العكازات.

المهمة هي: إعادة كتابة النموذج بحيث يمكن إعادة استخدامه عدد غير محدود من المرات. حسنًا ، نتذكر البرمجة الوظيفية ، ولديها وظائف خالصة لا تستخدم البيانات الخارجية ، في حالتنا "إعادة" ، فقط ما يتم إرسالها في الوسائط (الدعائم).

وهذا ما حدث.

فكرة المكون الخاص بنا هي أن تقوم بإنشاء غلاف (حاوية) وتكتب فيه منطق العمل مع العالم الخارجي (تلقي البيانات من متجر Redux وإرسال الإجراءات). لهذا الغرض ، يجب أن يكون مكون الحاوية قادرًا على تلقي بعض المعلومات من خلال عمليات الاسترجاعات. قائمة كاملة من الدعائم النموذج:

interface IFormProps { //          IsSubmitting?: boolean; //     submitText?: string; //    resetText?: string; //       (  ) validateOnChange?: boolean; //     blur'e  (  ) validateOnBlur?: boolean; // ,      . config: IFieldsFormMetaModel[]; //  . fields: FormFields; //    validationSchema: Yup.MidexSchema; //     onSubmit?: () => void; //     reset  onReset?: (e: React.MouseEvent<HTMLElement>) => void; //    onChangeField?: ( e: React.SyntaticEvent<HTMLInputElement, name: string; value: string ) => void; //      +    onChangeFields?: (values: FormFields, prop: { isValid }) => void; } 

باستخدام Formik

نستخدم المكون <Formik />.

 render() { const { fields, validationSchema, validateOnBlur = true, validateOnChange = true, } = this.props; return ( <Formik initialValues={fields} render={this.renderForm} onSubmit={this.handleSubmitForm} validationSchema={validationSchema} validateOnBlur={validateOnBlur} validateOnChange={validateOnChange} validate={this.validateFormLevel} /> ); } 

في نموذج النموذج "التحقق من الصحة" ، ندعو طريقة `this.validateFormLevel` ، التي نعطي فيها مكون الحاوية الفرصة للحصول على جميع الحقول التي تم تغييرها والتحقق مما إذا كانت صالحة.

 private validateFormLevel = (values: FormFields) => { const { onChangeFields, validationSchema } = this.props; if (onChangeFields) { validationSchema .validate(values) .then(() => { onChangeFields(values, { isValid: true }); }) .catch(() => { onChangeFields(values, { isValid: false }); }); } } 

يتعين علينا هنا استدعاء التحقق من الصحة مرة أخرى حتى نوضح للحاوية ما إذا كانت الحقول صالحة. عند تقديم نموذج ، نحن ببساطة ندعو prop `onSubmit`:

 private handleSubmitForm = (): void => { const { onSubmit } = this.props; if (onSubmit) { onSubmit(); } } 

مع الدعائم 1-5 يجب أن يكون كل شيء واضح. دعنا ننتقل إلى "config" و "الحقول" و "validationSchema".

الدعائم "التكوين"

 interface IFieldsFormMetaModel { /**   */ sectionName?: string; sectionDescription?: string; fieldsForm?: Array<{ /**    */ name?: string; //          prop 'fields' /**    checked */ checked?: boolean; /** enum,      */ type?: ElementTypes; /**    */ label?: string; /**    */ helperText?: string; /**      */ required?: boolean; /**      */ disabled?: boolean; /**  -    */ minLength?: number; /**            */ initialValue?: IInitialValue; /**      */ selectItems?: ISelectItems[]; //   select, dropdown   }>; } 

استنادًا إلى هذه الواجهة ، نقوم بإنشاء مجموعة من الكائنات ونعرض "القسم" -> "حقول القسم" وفقًا لهذا المخطط. حتى نتمكن من عرض عدة حقول للقسم أو في كل حقل في وقت واحد ، إذا كنت بحاجة إلى عنوان وملاحظة. كيف يعمل التقديم ، سنظهر بعد قليل.
مثال قصير على التكوين:

 export const config: IFieldsFormMetaModel[] = [ { sectionName: ' ', fieldsForm: [{ name: 'subject', label: '', type: ElementTypes.Text, }], }, { sectionName: '', sectionDescription: '  ', fieldsForm: [{ name: 'reminder', disabled: true, label: '', type: ElementTypes.CheckBox, checked: true, }], }, ]; 

بناءً على بيانات العمل ، يتم تعيين قيم مفاتيح `الاسم. يتم استخدام نفس القيم في مفاتيح prop `الحقول` لنقل القيم الأصلية أو المتغيرة للفورميك.

على سبيل المثال أعلاه ، قد تبدو الحقول التالية:

 const fields: SomeBusinessApiFields = { subject: '  ', reminder: 'yes', } 

للتحقق من الصحة ، نحتاج إلى اجتياز مخطط Yup. نعطي النموذج إلى النموذج باستخدام الدعائم الحاوية ، مع وصف التفاعلات هناك مع البيانات الخارجية ، على سبيل المثال ، الطلبات.

لا يمكن للنموذج التأثير على المخطط بأي طريقة ، على سبيل المثال:

 export const CreateClientSchema: ( props: CreateClientProps, ) => Yup.MixedSchema = (props: CreateClientProps) => Yup.object( { subject: Yup.string(), description: Yup.string(), date: dateSchema, address: addressSchema(props), }, ); 

تقديم وتحسين المجال

لتقديم ، قمنا بعمل خريطة للبحث السريع بالمفتاح. تبدو مختصرة والبحث أسرع من "التبديل".

 fieldsMap: Record< ElementTypes, ( state: FormikFieldState, handlers: FormikHandlersState, field: IFieldsFormInfo, ) => JSX.Element > = { [ElementTypes.Text]: ( state: FormikFieldState, handlers: FormikHandlersState, field: IFieldsFormInfo ) => { const { values, errors, touched } = state; return ( <FormTextField key={field.name} element={field} handleChange={this.handleChangeField(handlers.setFieldValue, field.name)} handleBlur={handlers.handleBlur} value={values[field.name]} error={touched[field.name] && errors[field.name] || ''} /> ); }, [ElementTypes.TextSearch]: (...) => {...}, [ElementTypes.TextArea]: (...) => {...}, [ElementTypes.Date]: (...) => {...}, [ElementTypes.CheckBox]: (...) => {...}, [ElementTypes.RadioButton]: (...) => {...}, [ElementTypes.Select]: (...) => {...}, }; 

كل حقل مكون هو حالة. وهو موجود في ملف منفصل ويتم لفه في "React.memo". يتم نقل جميع القيم من خلال الدعائم ، وتجاوز "الأطفال" ، لتجنب العارض لا لزوم لها.

استنتاج

نموذجنا ليس مثاليًا ، في كل حالة يتعين علينا إنشاء غلاف حاوية للعمل مع البيانات. حفظها في متجر `، وتحويل وتقديم طلبات. هناك تكرار للرمز الذي تريد التخلص منه. نحن نحاول إيجاد حل جديد يأخذ فيه النموذج ، حسب الدعائم ، المفتاح المرغوب من المتجر مع الحقول والإجراءات والرسوم البيانية والتكوين. في أحد الوظائف التالية سوف نخبرك بما جاء منها.