انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: حقول الإدخال المحكومة وإرسال النماذج في React

Wiring value and onChange ربط خاصيتي value وonChange

أتقن بناء حقول الإدخال النصية ومساحات الكتابة المحكومة بالحالة في React، واربط التسميات التوضيحية بخطاف useId القياسي مع معالجة إرسال النماذج وتنظيف المدخلات.
3 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

لربط حقل نصي بنظافة، اجمع دائماً بين خاصيتين متلازمتين: value={text} لقراءة الحالة، وonChange={(e) => setText(e.target.value)} لتحديثها. في React ينطلق حدث onChange مع كل ضغطة مفتاح أو عملية لصق فوراً دون انتظار مغادرة الحقل.

أما إذا مررت value دون معالج تغيير، فستقفل المكتبة الحقل وتطبع تحذيراً لأن المستخدم عاجز عن تعديل القيمة المعروضة. وللحقول الثابتة المقصودة مرر readOnly صراحةً.

الصف 2 كود برمجي
HTML 
function CouponInput() {
  const [code, setCode] = useState('SAVE20');
  function handleChange(e) {
    setCode(e.target.value.toUpperCase());
  }
  return (
    <label>
      Promo Code:
      <input value={code} onChange={handleChange} />
    </label>
  );
}
جرّب بنفسك
الصف 3 معاينة حية

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