30 lines
2.2 KiB
Markdown
30 lines
2.2 KiB
Markdown
|
---
|
||
|
|
title: Create a Controlled Form
|
||
|
|
localeTitle: إنشاء نموذج التحكم
|
||
|
|
---
|
||
|
|
## إنشاء نموذج التحكم
|
||
|
|
|
||
|
|
إن إنشاء نموذج خاضع للتحكم هو نفس العملية مثل إنشاء مدخلات خاضعة للتحكم ، باستثناء أنك تحتاج إلى معالجة حدث إرسال.
|
||
|
|
|
||
|
|
أولاً ، قم بإنشاء إدخال خاضع للتحكم يخزن قيمته في الحالة ، بحيث يكون هناك مصدر واحد للحقيقة. (هذا ما فعلته في التحدي السابق.) قم بإنشاء عنصر إدخال ، وقم بتعيين سمة القيمة الخاصة به إلى متغير الدخل الموجود في الحالة. تذكر ، يمكن الوصول إلى حالة من خلال `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>
|
||
|
|
`
|