2.6 KiB
title | localeTitle |
---|---|
Create a Controlled Input | إنشاء مدخلات متحكم بها |
إنشاء مدخلات متحكم بها
الفكرة هنا هي إنشاء مدخلات متحكم بها حيث يتم تحديث النص من حالتك ، وليس من المتصفح.
حتى نبدأ به لدينا هيكل عظمي لدينا فئة تسمى 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()
ومن ثم ستظل السلسلة داخل مربع الإدخال كما هي ، أي سلسلة فارغة.