المفاتيح المحسوبة لتحديث الحقول | تحديث الكائنات في الحالة دون تعديل مباشر

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

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

إذا ارتبطت عدة حقول إدخال بخصائص كائن حالة واحد مثل العنوان والمسار والمدرب، يمكنك توحيد تحديثها بدالة معالجة واحدة رشيقة عبر مطابقة سمة name للحقل مع اسم الخاصية واستخدام المفاتيح المحسوبة (Computed Property Keys) بالصيغة [e.target.name]: e.target.value.

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

مقارنة بين التعديل المباشر لكائن الحالة الذي يحتفظ بنفس المرجع فلا يحدث الشاشة وإنشاء كائن جديد بمعامل الانتشار

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

HTML

import { useState } from 'react';
function CourseDraft() {
  const [f, setF] = useState({ title: 'React' });
  const onEdit = (e) =>
    setF({ ...f, [e.target.name]: e.target.value });
  return (
    <input name="title" value={f.title}
      onChange={onEdit} />
  );
}

جرّب بنفسك

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

Computed Property Keys Inputs المفاتيح المحسوبة لتحديث الحقول

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

جميع فقرات هذا الدرس (تحديث الكائنات في الحالة دون تعديل مباشر)