تعلم استخدام Textarea في React - دليل شامل للمبتدئين

📝 دليل شامل لاستخدام Textarea في React للمبتدئين

Textarea هو عنصر HTML يستخدم لإنشاء حقول إدخال نصية متعددة الأسطر. في React، يمكننا التعامل مع Textarea كعنصر تحكم (Controlled Component) لإدارة بيانات المستخدم بشكل فعال.

🎯 ما هو عنصر Textarea؟

Textarea يسمح للمستخدمين بإدخال نصوص طويلة أو متعددة الأسطر في نماذج الويب. على عكس حقل الإدخال العادي (<input type="text">) الذي يكون لسطر واحد فقط.

// مثال بسيط لـ Textarea
<textarea 
  rows={4}
  cols={50}
  placeholder="اكتب رسالتك هنا..."
/>

🔧 إنشاء Textarea أساسي في React

لإنشاء Textarea في React، نستخدم الوسم <textarea> مع بعض الخصائص الأساسية:

function MessageForm() {
  return (
    <div>
      <h3>اترك رسالتك</h3>
      <textarea
        rows={5}
        cols={40}
        placeholder="اكتب رسالتك هنا..."
      />
    </div>
  );
}

🎮 إدارة حالة Textarea مع useState

لجعل Textarea عنصراً متحكماً، نستخدم useState لإدارة قيمته:

import { useState } from 'react';

function ContactForm() {
  const [message, setMessage] = useState('');

  const handleChange = (event) => {
    setMessage(event.target.value); // تحديث الحالة بالقيمة الجديدة
  };

  return (
    <textarea
      value={message}
      onChange={handleChange}
      rows={6}
      cols={50}
      placeholder="ما الذي تريد قوله؟"
    />
  );
}

📋 خصائص Textarea الشائعة

<textarea
  value={message}
  onChange={handleChange}
  rows={8}          // عدد الأسطر الظاهرة
  cols={60}         // عدد الأعمدة
  placeholder="اكتب هنا..." // نص تلميحي
  disabled={false}  // تعطيل الحقل
  required={true}   // إلزامية الحقل
  maxLength={500}   // الحد الأقصى للحروف
/>

🎪 التعامل مع أحداث Textarea

يمكننا التعامل مع مختلف الأحداث الخاصة بـ Textarea:

function SmartTextarea() {
  const [text, setText] = useState('');

  const handleInput = (event) => {
    console.log('المستخدم يكتب:', event.target.value);
  };

  const handleBlur = () => {
    console.log('ترك المستخدم حقل النص');
  };

  return (
    <textarea
      value={text}
      onChange={(e) => setText(e.target.value)}
      onInput={handleInput}
      onBlur={handleBlur}
      onFocus={() => console.log('حصل الحقل على التركيز')}
      rows={4}
      cols={50}
    />
  );
}

💡 نصائح عملية لاستخدام Textarea

1. استخدم placeholder لتوجيه المستخدم لما يجب كتابته
2. حدد rows وcols لمناسب لحجم النص المتوقع
3. استخدم maxLength لمنع إدخال نصوص طويلة جداً
4. أضف validation للتحقق من صحة البيانات المدخلة

function ValidatedTextarea() {
  const [comment, setComment] = useState('');
  const maxLength = 200;

  return (
    <div>
      <textarea
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        rows={4}
        cols={50}
        maxLength={maxLength}
        placeholder={`اكتب تعليقك (بحد أقصى ${maxLength} حرف)`}
      />
      <p>عدد الأحرف: {comment.length}/{maxLength}</p>
    </div>
  );
}

🚀 ماذا سنتعلم في الدرس القادم؟

في الدرس التالي، سنتعلم كيفية إنشاء نماذج متكاملة في React باستخدام multiple inputs وكيفية إدارة حالة عدة حقول إدخال في وقت واحد، بما في ذلك Textarea وحقول الإدخال الأخرى بشكل منسق وفعال.