أزاى تبني Form في React وتتعامل معاه باحترافية

[x32x01]

إزاي تبني Form في React وتتعامل معاه باحترافية
لو بتشتغل بـ React وجالك فورم كبير مطلوب منك تبنيه غالبا هتفتكر إنه سهل زي ما كنت بتعمل في HTML العادي. بس لحظه... ريأكت بيلعب لعبة تانية خالص مع الفورمات. الموضوع أعمق بكتير فـ ركز معايا عشان هنشرح إزاي تتعامل مع الـ Forms بطريقة احترافية.

في البدايه إيه حكاية الـ Forms في React؟​

ببساطة الفورمات في React محتاجة منك تتحكم في كل Input بنفسك. يعني إيه؟ يعني بدل ما تخلي اليوزر يكتب زي ما هو عايز في الـ Input لا هنا إنتا بتتدخل تشوف كل حاجة لحظة بلحظة وده اللي بنسميه Controlled Components.

طيب تعالي نبدأ بقى واحدة واحدة:

1. أول خطوة: Controlled Components :​

أول حاجة تعملها لما تيجي تبني فورم إنك تعرف إزاي تتحكم في الـ Inputs بالـ state. بدل ما الـ Input يكون لوحده زي زمان لا إنتا هنا هتبقى ماسك كل خطوة وبتتحكم فيها.
شوف المثال دا عشان الموضوع يوضح لك:

import { useState } from 'react';
function MyForm() {
  const [name, setName] = useState('');
  const handleChange = (event) => {
    setName(event.target.value); // أي حاجة المستخدم بيكتبها بتتسجل هنا
  };
  return (
    <form>
      <input type="text" value={name} onChange={handleChange} />
      <p>اللي كتبته: {name}</p>
    </form>
  );
}

اظن مفيش ابسط من كدا... بقيت متحكم في الـ Input وكل حرف المستخدم بيكتبه بتشوفه ساعتها.

2. تاني خطوه هي الـ Validation :​

مينفعش تسيب اليوزر يدخل أي كلام كدا لازم تتأكد إن البيانات اللي داخلة صح. وهنا بييجي دور الـ Validation. يعني لو حد دخل إيميل غلط؟ أو كلمة سر قصيرة؟ إنت اللي هتقول له لا يا معلم دي مش صح
طب إزاي بقى؟ تعالى نشوف:
ركز معايا في المثال دا كدا....

const handleSubmit = (event) => {
  event.preventDefault(); // منع الفورم من الإرسال التقليدي
  if (name === '') {
    alert('من فضلك اكتب اسمك!');
    return;
  }
  console.log('البيانات تمام، نقدر نبعتها!');
};

بالطريقة دي إنتا ضمنت إن مفيش حاجة غلط هتعدي من الفورم.

3. تالت حاجه هي إرسال البيانات للسيرفر :​

بعد ما كل حاجة تبقى تمام والبيانات صح هنبدأ نبعتها للسيرفر. ممكن تستخدم fetch أو axios عشان تبعت البيانات. طب إزاي... بص معايا كدا على المثال ده:

const handleSubmit = (event) => {
  event.preventDefault();
  fetch('https://example.com/api', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name }),
  })
    .then((response) => response.json())
    .then((data) => {
      console.log('البيانات وصلت:', data);
    })
    .catch((error) => {
      console.error('فيه مشكلة:', error);
    });
};

4. طب هتعمل اي لما الفورم يكبر...؟ :​

لو الفورم بتاعك فيه input كتير؟ زي الاسم والإيميل وكلمة سر ورقم الفون؟ هتعمل state لكل واحد؟ لأ طبعا!
الحل في إنك تستخدم Object واحد يحط كل البيانات.

const [formData, setFormData] = useState({
  name: '',
  email: '',
  password: ''
});
const handleChange = (event) => {
  const { name, value } = event.target;
  setFormData((prev) => ({
    ...prev,
    [name]: value
  }));
};

بالطريقة دي إنت لميت كل حاجة في مكان واحد يا معلم.

5. طب لو الفورم بقى كبير أوي؟ وقتها هتستخدم Formik و Yup :​

بعد ما شغلك يزيد في الفورمات هتلاقي نفسك عايز أدوات تساعدك زي Formik وYup. دول هيخلوك تتحكم في كل حاجة من الـ state للـ validation بطريقة منظمة.

import { Formik, Field, Form } from 'formik';
import * as Yup from 'yup';
const SignupSchema = Yup.object().shape({
  name: Yup.string().required('الاسم مطلوب'),
  email: Yup.string().email('الإيميل مش صح').required('الإيميل مطلوب'),
});
const MyForm = () => (
  <Formik
    initialValues={{ name: '', email: '' }}
    validationSchema={SignupSchema}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    {({ errors, touched }) => (
      <Form>
        <Field name="name" />
        {errors.name && touched.name ? <div>{errors.name}</div> : null}
        <Field name="email" />
        {errors.email && touched.email ? <div>{errors.email}</div> : null}
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

6. اخر واهم حاجه هي رفع الملفات :​

لو الفورم بتاعك فيه رفع ملفات، الموضوع سهل برضو متقلقش هتستخدم FormData عشان ترفع الملفات بشكل بسيط.

const handleFileChange = (event) => {
  const file = event.target.files[0];
  const formData = new FormData();
formData.append('file', file);
  fetch('https://example.com/upload', {
    method: 'POST',
    body: formData,
  })
    .then(response => response.json())
    .then(data => console.log('ملفك اترفع:', data))
    .catch(error => console.error('مشكلة في الرفع:', error));
};

ليه تعمل الفورم في React اصلا...؟​

- لأنها بتديك تحكم كامل على أي بيانات المستخدم بيدخلها.
- هتضيف Validation يضمن إن مفيش حاجة غلط تدخل.
- الفورمات في React بتخليك تشتغل كفاءة أعلى.

لو عندك أي سؤال يا صديقي أو محتاج توضيح اكتبلي في الكومنتات.