مساحة النص المحكومة textarea | حقول الإدخال المحكومة وإرسال النماذج في React

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في لغة HTML القياسية يُوضع النص الابتدائي لعنصر <textarea> بين وسمي البداية والنهاية. أما في React فقد وُحّدت واجهته ليعمل بنفس أسلوب <input> تماماً؛ إذ يُكتب كوسم ذاتي الإغلاق ويستقبل نصه عبر خاصية value مع onChange.

يمنحك هذا التوحيد مرونة عالية لتحويل أي حقل سطر واحد إلى مساحة ملاحظات متعددة الأسطر دون تغيير سطر واحد في منطق الحالة.

الصف 2 صورة توضيحية

مخطط من 4 مراحل لدورة الحقل المحكوم في React: ضغطة المستخدم ثم تحديث الحالة ثم إعادة التصيير ثم إرسال النموذج وتصفيره

الصف 3 كود برمجي

HTML

function SummaryEditor() {
  const [bio, setBio] = useState('Building clean UIs.');
  return (
    <div>
      <textarea rows={3} value={bio}
        onChange={(e) => setBio(e.target.value)} />
      <p>{140 - bio.length} chars remaining</p>
    </div>
  );
}

جرّب بنفسك

الصف 4 ملاحظة هامة

Controlled textarea in React مساحة النص المحكومة textarea

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (حقول الإدخال المحكومة وإرسال النماذج في React)