كيفية التعامل مع إرسال النماذج في React - دليل شامل للمبتدئين

🌟 إرسال النماذج في React: دليل شامل للمبتدئين

في هذا الدرس، سنتعلم كيفية التعامل مع إرسال النماذج في React بشكل احترافي وسهل. إرسال النماذج هو أحد المهام الأساسية في تطوير الويب، ونحن في React لدينا طرق رائعة للتعامل معها.

📝 الفهم الأساسي للنماذج في React

في React، نتعامل مع النماذج باستخدام مكونات مسيطر عليها (Controlled Components). هذا يعني أننا نتحكم بقيم الحقول عبر حالة (state) React بدلاً من السماح للمتصفح بإدارتها.

import { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('الإسم المدخل:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">إرسال</button>
    </form>
  );
}

🎯 منع التصرف الافتراضي للنموذج

عند إرسال النماذج، يقوم المتصفح تلقائياً بإعادة تحميل الصفحة. في React، نستخدم event.preventDefault() لمنع هذا السلوك:

const handleSubmit = (event) => {
  event.preventDefault(); // ⚡ تمنع إعادة تحميل الصفحة
  // معالجة البيانات هنا
};

📊 التعامل مع بيانات متعددة من النموذج

عندما يكون لديك نموذج بحقول متعددة، يمكنك إدارة جميع القيم في كائن حالة واحد:

function MultiFieldForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('بيانات النموذج:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
      />
      <button type="submit">تسجيل</button>
    </form>
  );
}

🔄 طرق مختلفة لمعالجة الإرسال

هناك عدة طرق لربط دالة الإرسال مع النموذج:

// الطريقة 1: استخدام onSubmit في الوسم form
<form onSubmit={handleSubmit}></form>

// الطريقة 2: استخدام onClick في الزر
<button type="button" onClick={handleSubmit}></button>

// الطريقة 3: استخدام event handler مباشرة
<form onSubmit={(e) => {
  e.preventDefault();
  console.log('تم الإرسال!');
}}>
</form>

🎪 مثال عملي: نموذج تسجيل دخول

لنطبق ما تعلمناه في مثال عملي لنموذج تسجيل دخول بسيط:

function LoginForm() {
  const [credentials, setCredentials] = useState({
    email: '',
    password: ''
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setCredentials(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleLogin = (event) => {
    event.preventDefault();
    
    // محاكاة عملية تسجيل الدخول
    if (credentials.email && credentials.password) {
      alert(`مرحباً ${credentials.email}! تم تسجيل الدخول بنجاح`);
      setCredentials({ email: '', password: '' });
    }
  };

  return (
    <form onSubmit={handleLogin} className="login-form">
      <h3>تسجيل الدخول</h3>
      
      <div className="form-group">
        <label>البريد الإلكتروني:</label>
        <input
          type="email"
          name="email"
          value={credentials.email}
          onChange={handleInputChange}
          required
        />
      </div>

      <div className="form-group">
        <label>كلمة المرور:</label>
        <input
          type="password"
          name="password"
          value={credentials.password}
          onChange={handleInputChange}
          required
        />
      </div>

      <button type="submit" className="submit-btn">
        تسجيل الدخول
      </button>
    </form>
  );
}

💡 نصائح مهمة لإرسال النماذج

1. استخدم type="submit" للأزرار داخل النماذج
2. استخدم event.preventDefault() دائماً لمنع إعادة التحميل
3. افصل المنطق عن العرض لسهولة الصيانة
4. استخدم الحالة لإدارة قيم الحقول بشكل مركزي