إزاي تعمل فورم بسهولة وشياكة في React مع Formik

[x32x01]

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

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

1. اول خطوة – هننزل Formik​

ببساطة هتنزل المكتبة بإنك تكتب:

npm install formik

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

2. الخطوة التانيه: هنعمل أول فورم سريع مع Formik​

هنعمل فورم تسجيل دخول بسيط: إيميل وباسورد, الفكرة إننا هنلف الفورم كله بـ <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

دلوقتي ممكن نحدد قواعد الفاليديشن للفورم زي التأكد إن الإيميل مكتوب صح وإن الباسورد أطول من 6 حروف.

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. لو عندك سؤال أو استفسار، اكتب في الكومنتات. ومتنساش تقول رأيك في الشرح!