التعامل مع الـ Forms في React

الدرس الثاني عشر: التعامل مع الـ Forms في React

في هذا الدرس، سنتناول كيفية إنشاء نموذج (Form) في React وكيفية التعامل مع المدخلات التي يقدمها المستخدم باستخدام controlled components و useState. ستتعلم كيفية بناء نماذج تفاعلية، التحكم في بيانات المدخلات، وكيفية التعامل مع الأحداث المترتبة على التفاعل مع هذه النماذج.

1. كيفية إنشاء نموذج في React

في React، يمكن إنشاء النماذج بسهولة باستخدام form elements مثل input, select, textarea, وغيرها. ومع ذلك، ستحتاج إلى استخدام حالة (state) لتخزين البيانات المدخلة من قبل المستخدم وتحقيق التفاعل في واجهة المستخدم.

إنشاء نموذج بسيط:

import React, { useState } from 'react';

function ContactForm() {
  // استخدام useState لتخزين البيانات المدخلة
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  // التعامل مع حدث إرسال النموذج
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Name:', name);
    console.log('Email:', email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)} // تحديث الـ state عند التغيير
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)} // تحديث الـ state عند التغيير
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default ContactForm;

الشرح:

• في هذا المثال، أنشأنا نموذجًا يحتوي على مدخلين (inputs): واحد للاسم وآخر للبريد الإلكتروني.
• استخدمنا useState لتخزين البيانات المدخلة في name و email.
• عند تغيير قيمة المدخلات، يتم تحديث state باستخدام دالة setName و setEmail.
• عند إرسال النموذج، يتم تنفيذ handleSubmit، حيث يتم عرض البيانات المدخلة في وحدة التحكم (Console).

2. التحكم في المدخلات باستخدام Controlled Components

في React، تعتبر المدخلات controlled components إذا كانت البيانات المدخلة تتم مراقبتها من خلال state. أي أن قيمة الحقل تأتي من state بدلاً من أن تكون قيمته الداخلية. عند التغيير في المدخل، نقوم بتحديث الـ state لتعكس القيم المدخلة.

مثال على Controlled Component:

import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Username:', username);
    console.log('Password:', password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)} // تحديث الـ state عند التغيير
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)} // تحديث الـ state عند التغيير
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

الشرح:

• هنا يتم التحكم في المدخلات باستخدام useState بحيث يتم ربط قيمة كل حقل مع state.
• يتم تحديث state باستخدام setUsername و setPassword عند تغيير المدخلات.
• هذا يسمح بالتحكم الكامل في المدخلات بواسطة React، مما يسهل التفاعل مع البيانات المدخلة وتحقيق الواجهات التفاعلية.

3. التعامل مع البيانات المدخلة من المستخدم باستخدام useState

يتم استخدام useState في React لتخزين البيانات المدخلة من المستخدم. في النماذج، يمكن لكل مدخل (input) أن يحتوي على state خاص به. عندما يغير المستخدم قيمة الحقل، يتم تحديث state باستخدام دالة setState.

مثال على إدارة أكثر من حقل باستخدام useState:

import React, { useState } from 'react';

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

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value // تحديث الـ state بناءً على الحقل الذي تم تغييره
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form data:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Register</button>
    </form>
  );
}

export default RegistrationForm;

الشرح:

• في هذا المثال، نستخدم useState لحفظ جميع البيانات في formData ككائن واحد يحتوي على username, email, و password.
• الدالة handleChange تقوم بتحديث الـ state بناءً على الحقل الذي تم تغييره. نحن نستخدم name من كل input لتحديد الحقل الذي يجب تحديثه.
• عند إرسال النموذج، نقوم بعرض بيانات النموذج في وحدة التحكم.

4. التعامل مع التحقق من صحة البيانات (Validation)

غالبًا ما تحتاج إلى التحقق من صحة المدخلات قبل إرسال النموذج. يمكن القيام بذلك بسهولة باستخدام useState.

مثال على التحقق من صحة البيانات:

import React, { useState } from 'react';

function SignupForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    // التحقق من صحة البريد الإلكتروني
    if (!email.includes('@')) {
      setError('Please enter a valid email address');
    } else {
      setError('');
      console.log('Email:', email);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default SignupForm;

الشرح:

• في هذا المثال، نقوم بالتحقق من صحة البريد الإلكتروني للتأكد من أنه يحتوي على علامة @.
• إذا كانت البيانات المدخلة غير صحيحة، نعرض رسالة خطأ تحت الحقل باستخدام useState لحفظ حالة الخطأ.

5. الختام

في هذا الدرس:

• تعلمنا كيفية إنشاء نموذج (Form) في React باستخدام useState.
• فهمنا كيفية التحكم في المدخلات باستخدام controlled components.
• تعلمنا كيفية التعامل مع البيانات المدخلة من قبل المستخدم، والتفاعل مع النموذج باستخدام handleChange و handleSubmit.
• قمنا بمراجعة كيفية التعامل مع التحقق من صحة البيانات في النماذج.

تعلم هذه الأساسيات سيجعل من السهل عليك بناء نماذج تفاعلية في تطبيقات React، كما سيمكنك من التفاعل مع المستخدم بشكل أكثر فعالية.