x32x01
أدارة أكتب كود
- بواسطة x32x01 ||
تخيل معايا كدا يا صديقي.. بتعمل فورم ومش عايز تتعب نفسك في مشاكل زي التأكد من البيانات وتسليمها وغيره هنا بييجي دور Formik اللي هيسهل عليك الدنيا أن شاء الله وهيخلي الفورم يتابع البيانات أول بأول ويتأكد إنها صح ولما تخلص هيبعت كل حاجة من غير ما تكتب كود كتير
فخلينا يا صديقي نشوف خطوة خطوة ازاي نستخدمه لحد ما تتقنه تماما .
دلوقتي انت نزلت مكتبة Formik وبقت جاهزة عندك تقدر تبدأ بيها على طول.
هنا كل خانة بتمثل عنصر <Field> وFormik هيحدث البيانات من غير ما نكتب كود تاني يعني المستخدم كل ما يكتب الفورم هيكون متابع اللي بيحصل وبيحفظه على طول.
-اول حاجه هننزل Yup كده علي سريع:
دلوقتي ممكن نحدد قواعد الفاليديشن للفورم زي التأكد إن الإيميل مكتوب صح وإن الباسورد أطول من 6 حروف.
وبعدين هنضيف validationSchema للفورم:
وبكده يا صديقي أي خطأ هيظهر مباشرة تحت الخانة سواء كانت باسورد قصيرة أو الإيميل مش صح.
وبكده نكون خلصنا شرحنا عن الـ Formik. لو عندك سؤال أو استفسار، اكتب في الكومنتات. ومتنساش تقول رأيك في الشرح!
فخلينا يا صديقي نشوف خطوة خطوة ازاي نستخدمه لحد ما تتقنه تماما .
1. اول خطوة – هننزل Formik
ببساطة هتنزل المكتبة بإنك تكتب: Code:
npm install formik
2. الخطوة التانيه: هنعمل أول فورم سريع مع Formik
هنعمل فورم تسجيل دخول بسيط: إيميل وباسورد, الفكرة إننا هنلف الفورم كله بـ <Formik> اللي هيدير كل حاجة تلقائي. Code:
import React from 'react';
import { Formik, Form, Field } from 'formik';
const LoginForm = () => (
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values) => {
console.log("البيانات اللي تم إدخالها:", values);
}}
>
{() => (
<Form>
<label>Email:</label>
<Field name="email" type="email" />
<label>Password:</label>
<Field name="password" type="password" />
<button type="submit">Login</button>
</Form>
)}
</Formik>
);
export default LoginForm;
3. تالت خطوه هي الفاليديشن مع مكتبة Yup
ال Formik بيشتغل حلو جدا مع Yup اللي هتساعدنا نعمل قواعد تحقق للبيانات بسهولة.-اول حاجه هننزل Yup كده علي سريع:
Code:
npm install yup
Code:
import * as Yup from 'yup';
const LoginSchema = Yup.object().shape({
email: Yup.string().email('الإيميل مش صحيح').required('الإيميل مطلوب'),
password: Yup.string().min(6, 'الباسورد قصيرة').required('الباسورد مطلوبة'),
});
Code:
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={LoginSchema}
onSubmit={(values) => { console.log("البيانات اللي تم إدخالها:", values); }}
>
4. إظهار الأخطاء للمستخدم بشكل مباشر لليوزر
بعد ما اتأكدنا من البيانات لازم المستخدم يعرف الخطأ فين دلوقتي هنستخدم <ErrorMessage> من Formik عشان نعرض الرسائل مباشرة تحت كل خانة. Code:
import { ErrorMessage } from 'formik';
<Field name="email" type="email" />
<ErrorMessage name="email" component="div" className="error" />
<Field name="password" type="password" />
<ErrorMessage name="password" component="div" className="error" />
5.ال Formik مع الـ Custom Components بتاعتك
طيب لو انتا عندك Input وعايز تضيفه للفورم.. عادي مفيش مشكلة هنستخدم Field ونبعت الprops بتاعته زي name، value وonChange. Code:
<Field name="email" render={({ field }) => (
<input {...field} placeholder="اكتب الإيميل بتاعك" />
)} />