---
title: Create a Controlled Input
localeTitle: إنشاء مدخلات متحكم بها
---
## إنشاء مدخلات متحكم بها

الفكرة هنا هي إنشاء مدخلات متحكم بها حيث يتم تحديث النص من حالتك ، وليس من المتصفح.

حتى نبدأ به لدينا هيكل عظمي لدينا فئة تسمى `ControlledInput` ومتغير حالة يدعى `input` . الآن كل ما عليك القيام به هو أخذ تلك الحالة وعندما يتم ملاحظة حدوث تغيير في مربع الإدخال ، يتم تشغيل دالة تغير القيمة داخل مربع الإدخال هذا وفي الفقرة أدناه.

لذلك أنت الخطوة الأولى سوف يجعل وظيفة يقوم بتغيير المتغير الدولة `input` .

 `handleChange(event) { 
    this.setState({ 
      input: event.target.value 
    }); 
 } 
` 

ستشمل خطوتك التالية إنشاء مربع إدخال وتشغيله عند كتابة أي شخص لأي شيء. لحسن الحظ لدينا حدث يسمى `onChange()` لخدمة هذا الغرض. PS - وهنا طريقة أخرى لربط `this` في وظيفة

 `<input onChange = {this.handleChange.bind(this)}/> 
` 

لكن هذا لن يخدم هدفك. على الرغم من أنك قد تشعر أن عملها. إذن ما يحدث هنا هو تحديثات النص من المتصفح وليس الدولة. لذا ، لتصحيح ذلك ، سنضيف سمة `value` `this.state.input` على `this.state.input` لعنصر الإدخال الذي سيجعل الإدخال يتحكم في الحالة.

 `<input value = {this.state.input} onChange = {this.handleChange.bind(this)}/> 
` 

يمكن أن يكون من الصعب جدًا استيعابها ولكن لجعل الأمور أكثر وضوحًا ، جرّب إزالة أمر `onChange` بأكمله حتى تبدو الشفرة مثل هذا

 `<input value = {this.state.input}/> 
` 

الآن قم بتشغيل الاختبارات مرة أخرى هل أنت قادر على كتابة أي شيء؟ سيكون الجواب عليه "لا" لأن مربع الإدخال الخاص بك يحصل على قيمة من `input` متغير الحالة حيث لا يوجد تغيير في `input` الحالة (سلسلة فارغة مبدئياً) والذي سيحدث فقط عندما تقوم بتشغيل الدالة `handleChange()` والتي سوف يحدث فقط عندما يكون لديك معالج حدث مثل `onChange()` ومن ثم ستظل السلسلة داخل مربع الإدخال كما هي ، أي سلسلة فارغة.