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