2.2 KiB
| title | localeTitle |
|---|---|
| Create a Controlled Form | إنشاء نموذج التحكم |
إنشاء نموذج التحكم
إن إنشاء نموذج خاضع للتحكم هو نفس العملية مثل إنشاء مدخلات خاضعة للتحكم ، باستثناء أنك تحتاج إلى معالجة حدث إرسال.
أولاً ، قم بإنشاء إدخال خاضع للتحكم يخزن قيمته في الحالة ، بحيث يكون هناك مصدر واحد للحقيقة. (هذا ما فعلته في التحدي السابق.) قم بإنشاء عنصر إدخال ، وقم بتعيين سمة القيمة الخاصة به إلى متغير الدخل الموجود في الحالة. تذكر ، يمكن الوصول إلى حالة من خلال this.state . بعد ذلك ، قم بتعيين سمة onChange لعنصر الإدخال لاستدعاء الدالة "handleChange".
حل
<input value={this.state.input} onChange={this.handleChange}/>
بعد ذلك ، قم بإنشاء أسلوب handleSubmit للمكون الخاص بك. أولاً ، لأن إرسال النموذج الخاص بك يجب عليك منع تحديث الصفحة. ثانيا ، استدعاء الأسلوب setState() ، تمرير كائن من أزواج key-value مختلفة التي تريد تغييرها. في هذه الحالة ، تريد تعيين "إرسال" إلى قيمة المتغير "الإدخال" وتعيين "الإدخال" إلى سلسلة فارغة.
handleSubmit(event) { event.preventDefault(); this.setState({ input: '', submit: this.state.input }); }
والآن بعد أن يتم التعامل مع بياناتك في الحالة ، يمكننا استخدام هذه البيانات. قم بإنشاء عنصر h1 . داخل عنصر h1 ضع متغير "إرسال" الخاص بك. تذكر أن "submit" يقع داخل الولاية لذا ستحتاج إلى استخدام هذا this.state . بالإضافة إلى ذلك ، يتطلب وضع المتغير داخل JSX أقواسًا متعرجة { } لأنها جافا سكريبت.
<h1>{this.state.submit}</h1>