تعلم Formik في React لبناء الفورمز بسهولة

تخيل معايا كده يا صديقي .. بتعمل Form ومش عايز تتعب نفسك في مشاكل زي التأكد من البيانات وتسليمها وغيره؟
هنا بييجي دور Formik اللي هيخلي الدنيا أسهل ويخلي الفورم يتابع البيانات أول بأول ويتأكد إنها صح، ولما تخلص يبعت كل حاجة من غير ما تكتب كود كتير .

فخلينا نشوف خطوة خطوة ازاي نستخدمه لحد ما تتقنه تمامًا:

1. تنزيل مكتبة Formik ​

أول حاجة هنعملها هي تنزيل المكتبة:

npm install formik

دلوقتي Formik جاهزة عندك وتقدر تبدأ بيها على طول.

2. إنشاء أول فورم بسيط مع Formik ​

هنعمل فورم تسجيل دخول بسيط: Email و Password.
كل الفورم هيتلف بـ <Formik> اللي هيدير كل حاجة تلقائي.

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;

هنا كل خانة بـ <Field> وFormik هيحدث البيانات من غير ما نكتب كود تاني .

3. الفاليديشن مع مكتبة Yup ​

Formik بيشتغل حلو جدًا مع Yup، اللي هتساعدنا نعمل قواعد تحقق للبيانات بسهولة.

أول حاجة هنعملها هي تنزيل Yup:

npm install yup

بعد كده نحدد قواعد الفاليديشن للفورم:

import * as Yup from 'yup';

const LoginSchema = Yup.object().shape({
email: Yup.string().email('الإيميل مش صحيح').required('الإيميل مطلوب'),
password: Yup.string().min(6, 'الباسورد قصيرة').required('الباسورد مطلوبة'),
});

ونضيف validationSchema للفورم:

<Formik
initialValues={{ email: '', password: '' }}
validationSchema={LoginSchema}
onSubmit={(values) => { console.log("البيانات اللي تم إدخالها:", values); }}

>

4. إظهار الأخطاء للمستخدم مباشرة ​

بعد ما اتأكدنا من البيانات، لازم المستخدم يعرف الخطأ فين.
هنستخدم <ErrorMessage> من Formik لعرض الرسائل تحت كل خانة:

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:

<Field name="email" render={({ field }) => (
<input {...field} placeholder="اكتب الإيميل بتاعك" />
)} />

وبكده تقدر تستخدم الفورمز اللي انت محتاجها بكل سهولة وتبقى متابع البيانات لحظة بلحظة .

الخلاصة ​

Formik مع Yup هيسهلوا عليك كل حاجة تخص الفورمز في React، من متابعة البيانات لحد التأكد من صحتها وإرسالها بدون مجهود كبير.
ابدأ خطوة خطوة وهتلاقي نفسك بقيت محترف في الفورمز بسرعة .