Formik هي مكتبة لإدارة النماذج توفر المكونات والخطافات لتسهيل عملية إنشاء نماذج React. يعتني Formik بحالات النموذج والتحقق من الصحة ومعالجات الأخطاء نيابة عنك مما يجعل من السهل جمع بيانات المستخدم وتخزينها.
في هذا البرنامج التعليمي ، ستتعلم كيف يمكنك إنشاء نموذج تسجيل في React باستخدام Formik. للمتابعة ، يجب أن تكون مرتاحًا للعمل مع خطافات React.
أنشئ تطبيق React
استخدم إنشاء تطبيق لتفاعل إنشاء مشروع React جديد:
npx create-response-app formik-form
الآن ، انتقل إلى ملف formik- شكل / src المجلد وحذف جميع الملفات باستثناء ملفات App.js.
بعد ذلك ، قم بإنشاء ملف جديد وقم بتسميته Register.js. هذا هو المكان الذي ستضيف فيه النموذج الخاص بك. تذكر أن تقوم باستيراده بتنسيق App.js.
قم بإنشاء نموذج رد فعل
يمكنك إنشاء نماذج React باستخدام مكونات مضبوطة أو مكونات غير خاضعة للرقابة. المكوِّن الخاضع للرقابة هو أحد المكونات التي يتم معالجة بيانات النموذج الخاصة بها بواسطة React نفسها. المكون غير المتحكم فيه هو المكون الذي يتم معالجة بيانات النموذج الخاصة به بواسطة DOM.
الرسمي رد فعل المستندات نوصي باستخدام المكونات الخاضعة للرقابة. إنها تتيح لك تتبع بيانات النموذج في الحالة المحلية وبالتالي تتمتع بالتحكم الكامل في النموذج.
يوجد أدناه مثال على نموذج تم إنشاؤه باستخدام مكون مضبوط.
استيراد {useState} من "رد فعل" ؛
const تسجيل = () => {
const [email، setemail] = useState ("") ؛
const [password، setpassword] = useState ("") ؛
const handleSubmit = (حدث) => {
event.preventDefault () ،
console.log (البريد الإلكتروني) ؛
};
const handleEmail = (حدث) => {
setemail (event.target.value) ؛
};
const handlePassword = (حدث) => {
setpassword (event.target.value) ؛
};
إرجاع (
);
};
تصدير الافتراضي التسجيل ؛
في الكود أعلاه ، أنت تهيئة الدولة وإنشاء دالة معالج لكل حقل إدخال. أثناء عمل ذلك ، يمكن أن تتكرر التعليمات البرمجية بسهولة وتشوش ، خاصة مع العديد من حقول الإدخال. تعد إضافة التحقق من الصحة ومعالجة رسائل الخطأ تحديًا آخر.
فورميك يهدف إلى تقليل هذه المشاكل. يجعل من السهل التعامل مع حالة النموذج والتحقق من صحة بيانات النموذج وإرسالها.
أضف Formik إلى React
قبل استعمال فورميك، قم بإضافته إلى مشروعك باستخدام npm.
npm تثبيت فورميك
لدمج Formik ، ستستخدم امتداد useFormik خُطَّاف. في Register.js، قم باستيراد useFormik في الجزء العلوي من الملف:
استيراد {useFormik} من "formik"
الخطوة الأولى هي تهيئة قيم النموذج. في هذه الحالة ، ستقوم بتهيئة البريد الإلكتروني وكلمة المرور.
const formik = useFormik ({
القيم الأولية: {
البريد الإلكتروني: ""،
كلمه السر: ""،
},
عند الإرسال: القيم => {
// التعامل مع تقديم النموذج
},
});
أنت تقوم أيضًا بإضافة وظيفة onSubmit التي تتلقى قيم النموذج وتتولى إرسال النموذج. بالنسبة لنموذج تسجيل مثل هذا ، قد يعني هذا إنشاء مستخدم جديد في قاعدة البيانات.
الخطوة التالية هي استخدام ملف فورميك كائن للحصول على قيم النموذج داخل وخارج الحالة.
في الكود أعلاه ، أنت:
- إعطاء حقول الإدخال هوية شخصية و اسم قيمة مساوية للقيمة المستخدمة أثناء التهيئة في ملف useFormik خُطَّاف.
- الوصول إلى قيمة حقل باستخدام اسمه لاسترجاعه منه فورميك.
- ربط formik.handleChange إلى حدث onChange لعرض قيم الإدخال كما يكتب المستخدم.
- استخدام فورميك لتتبع الحقول التي تمت زيارتها.
- ربط فورميك الى عند تقديم الحدث لتحريك عند تقديم الوظيفة التي أضفتها إلى useFormik خُطَّاف.
تفعيل التحقق من صحة النموذج
عند إنشاء نموذج ، من المهم التحقق من صحة إدخال المستخدم كما يفعل مصادقة المستخدم سهل لأنك تقوم فقط بتخزين البيانات بالتنسيق الصحيح. في النموذج الخاص بك ، على سبيل المثال ، يمكنك التحقق مما إذا كان البريد الإلكتروني المقدم صحيحًا وما إذا كانت كلمة المرور تحتوي على أكثر من 8 أحرف.
للتحقق من صحة النموذج ، حدد دالة التحقق من الصحة التي تقبل قيم النموذج وتعيد كائن خطأ.
إذا قمت بإضافة وظيفة التحقق من الصحة إلى useFormik، أي خطأ في التحقق من الصحة موجود سيكون متاحًا في فورميك، مفهرسة على اسم الإدخال. على سبيل المثال ، يمكنك الوصول إلى خطأ حول استخدام حقل البريد الإلكتروني Formik.errors.email.
في Register.js، قم بإنشاء التحقق من صحة وظيفة وإدراجها في useFormik.
const formik = useFormik ({
القيم الأولية: {
البريد الإلكتروني: ""،
كلمه السر: ""،
},
التحقق من صحة: () => {
أخطاء const = {} ؛
console.log (أخطاء)
إذا (! formik.values.email) {
errors.email = "مطلوب" ؛
} وإلا إذا (
! / ^ [A-Z0-9 ._٪ + -] + @ [A-Z0-9 .-] + \\. [A-Z] {2،4} $ / i.test (formik.values.email)
) {
errors.email = "عنوان بريد إلكتروني غير صالح" ؛
}
إذا (! formik.values.password) {
errors.password = "مطلوب" ؛
} else if (formik.values.password.length <8) {
errors.password = "يجب أن يتكون من 8 أحرف أو أكثر" ؛
}
عودة الأخطاء
},
عند التقديم: (القيم) => {
console.log ("تم الإرسال!") ؛
// التعامل مع التسليم
},
});
أضف معالجة الخطأ
بعد ذلك ، اعرض رسائل الخطأ إذا كانت موجودة. يستخدم فورميك تمس للتحقق مما إذا تمت زيارة الحقل أم لا. هذا يمنع ظهور خطأ في حقل لم يزره المستخدم بعد.
التحقق من صحة البيانات باستخدام Yup
يوفر Formik طريقة أسهل للتحقق من صحة النماذج باستخدام امتداد نعم مكتبة. تثبيت yup لتبدأ.
تثبيت npm نعم
يستورد اجل في Register.js.
استيراد * كما نعم من "نعم"
بدلاً من كتابة وظيفة التحقق المخصصة الخاصة بك ، استخدم Yup للتحقق مما إذا كان البريد الإلكتروني وكلمة المرور صالحين.
const formik = useFormik ({
القيم الأولية: {
البريد الإلكتروني: ""،
كلمه السر: ""،
},
ValidationSchema: Yup.object (). شكل ({
البريد الإلكتروني: Yup.string ()
.email ("عنوان بريد إلكتروني غير صالح")
.مطلوبة مطلوبة")،
كلمة المرور: Yup.string ()
.min (8 ، "يجب أن يتكون من 8 أحرف أو أكثر")
.مطلوبة مطلوبة")
}),
عند التقديم: (القيم) => {
console.log ("تم الإرسال!") ؛
// التعامل مع التسليم
},
});
وهذا كل شيء! لقد أنشأت نموذج تسجيل بسيطًا باستخدام Formik و Yup.
تغليف كل شيء
تعد النماذج جزءًا لا يتجزأ من أي تطبيق لأنها تتيح لك جمع معلومات المستخدم. في React ، يمكن أن يكون إنشاء النماذج تجربة مؤلمة خاصةً إذا كنت تتعامل مع الكثير من البيانات أو النماذج المتعددة. توفر أداة مثل Formik طريقة سهلة وسلسة لاسترداد قيم النموذج والتحقق من صحتها.
أفضل 10 ممارسات تفاعلية يجب اتباعها في عام 2022
اقرأ التالي
مواضيع ذات صلة
- برمجة
- برمجة
- جافا سكريبت
- تتفاعل
نبذة عن الكاتب
ماري جاثوني هي مطورة برامج لديها شغف لإنشاء محتوى تقني ليس إعلاميًا فحسب ، بل جذابًا أيضًا. عندما لا تقوم بالبرمجة أو الكتابة ، فإنها تستمتع بالتسكع مع الأصدقاء والتواجد في الهواء الطلق.
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
