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() ومن ثم ستظل السلسلة داخل مربع الإدخال كما هي ، أي سلسلة فارغة.