---
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> 
`