قد يكون العمل مع النماذج وعناصر النموذج عند التطوير باستخدام React معقدًا لأن عناصر نموذج HTML تتصرف بشكل مختلف نوعًا ما في React عن عناصر DOM الأخرى.
تعرف على كيفية العمل مع النماذج وعناصر النموذج مثل مربعات الاختيار ومناطق النص ومدخلات النص أحادي السطر.
إدارة حقول الإدخال في النماذج
في React ، غالبًا ما تتم إدارة حقل إدخال في نموذج عن طريق إنشاء حالة وربطها بحقل الإدخال.
على سبيل المثال:
وظيفةبرنامج() {const [firstName، setFirstName] = React.useState ('');
وظيفةhandleFirstNameChange(حدث) {
setFirstName( حدث.هدف.قيمة )
}
يعود (
<استمارة>
<نوع الإدخال ='نص' نائب ='الاسم الأول' onInput = {handleFirstNameChange} />
</form>
)
}
أعلاه لدينا الاسم الأول دولة ، أ عند الإدخال الحدث ، وأ التعامل مع التغيير معالج. ال التعامل مع التغيير تعمل الوظيفة على كل ضغطة مفتاح لتحديث ملف الاسم الأول ولاية.
قد يكون هذا النهج مثاليًا عند العمل مع حقل إدخال واحد ، ولكن إنشاء حالات و سوف تصبح وظائف المعالج لكل عنصر إدخال متكررة عند العمل مع مدخلات متعددة مجالات.
لتجنب كتابة التعليمات البرمجية المتكررة والمكررة في مثل هذه المواقف ، امنح كل حقل إدخال اسمًا مميزًا ، وقم بتعيين كائن كقيمة الحالة الأولية للنموذج الخاص بك ، ثم قم بتعبئة الكائن بخصائص بنفس أسماء الإدخال مجالات.
على سبيل المثال:
وظيفةبرنامج() {مقدار ثابت [formData، setFormData] = React.useState (
{
الاسم الأول: '',
اسم العائلة: ''
}
);
يعود (
<استمارة>
<نوع الإدخال ='نص' نائب ='الاسم الأول' الاسم ='الاسم الأول' />
<نوع الإدخال ='نص' نائب ='اسم العائلة' الاسم ='اسم العائلة' />
</form>
)
}
ال بيانات النموذج سيكون بمثابة متغير الحالة لإدارة وتحديث جميع حقول الإدخال داخل النموذج. تأكد من أن أسماء الخصائص في كائن الحالة مطابقة لأسماء عناصر الإدخال.
لتحديث الحالة ببيانات الإدخال ، أضف ملف عند الإدخال مستمع الحدث إلى عنصر الإدخال ، ثم اتصل بوظيفة المعالج التي تم إنشاؤها.
على سبيل المثال:
وظيفةبرنامج() {مقدار ثابت [formData، setFormData] = React.useState (
{
الاسم الأول: '',
اسم العائلة: ''
}
);
وظيفةالتعامل مع التغيير(حدث) {
setFormData ((prevState) => {
يعود {
...prevState,
[event.target.name]: حدث.هدف.قيمة
}
})
}
يعود (
<استمارة>
<مدخل
اكتب ='نص'
نائب ='الاسم الأول'
الاسم ='الاسم الأول'
onInput = {handleChange}
/>
<مدخل
اكتب ='نص'
نائب ='اسم العائلة'
الاسم ='اسم العائلة'
onInput = {handleChange}
/>
</form>
)
}
استخدمت كتلة التعليمات البرمجية أعلاه ملف عند الإدخال الحدث ووظيفة المعالج ، handleFirstNameChange. هذا handleFirstNameChange ستعمل الوظيفة على تحديث خصائص الحالة عند استدعائها. ستكون قيم خصائص الحالة مماثلة لتلك الخاصة بعناصر الإدخال المقابلة لها.
تحويل مدخلاتك إلى مكونات خاضعة للرقابة
عند إرسال نموذج HTML ، يكون سلوكه الافتراضي هو الانتقال إلى صفحة جديدة في المستعرض. هذا السلوك غير مريح في بعض المواقف ، مثل عندما تريد التحقق من صحة البيانات التي تم إدخالها في النموذج. في معظم الحالات ، ستجد أنه من الأنسب أن يكون لديك وظيفة JavaScript مع إمكانية الوصول إلى المعلومات التي تم إدخالها في النموذج. يمكن تحقيق ذلك بسهولة في React باستخدام مكونات مضبوطة.
باستخدام ملفات index.html ، تحتفظ عناصر النموذج بتتبع حالتها وتعديلها استجابةً لإدخال المستخدم. باستخدام React ، تعدل وظيفة الحالة المحددة حالة ديناميكية مخزنة في خاصية حالة المكون. يمكنك الجمع بين الحالتين من خلال جعل حالة React المصدر الوحيد للحقيقة. بهذه الطريقة ، يتحكم المكون الذي يقوم بإنشاء نموذج في ما يحدث عندما يقوم المستخدم بإدخال البيانات. تسمى عناصر نموذج الإدخال ذات القيم التي تتحكم فيها React بالمكونات الخاضعة للرقابة أو المدخلات الخاضعة للرقابة.
للاستفادة من المدخلات المضبوطة في تطبيق React الخاص بك ، أضف قيمة prop إلى عنصر الإدخال الخاص بك:
وظيفةبرنامج() {مقدار ثابت [formData، setFormData] = React.useState (
{
الاسم الأول: '',
اسم العائلة: ''
}
);
وظيفةالتعامل مع التغيير(حدث) {
setFormData ((prevState) => {
يعود {
...prevState,
[event.target.name]: حدث.هدف.قيمة
}
})
}
يعود (
<استمارة>
<مدخل
اكتب ='نص'
نائب ='الاسم الأول'
الاسم ='الاسم الأول'
onInput = {handleChange}
القيمة = {formData.firstName}
/>
<مدخل
اكتب ='نص'
نائب ='اسم العائلة'
الاسم ='اسم العائلة'
onInput = {handleChange}
القيمة = {formData.lastName}
/>
</form>
)
}
يتم الآن تعيين سمات قيمة عناصر الإدخال لتكون قيمة خصائص الحالة المقابلة. يتم دائمًا تحديد قيمة المدخلات من قبل الدولة عند استخدام مكون مضبوط.
التعامل مع عنصر إدخال Textarea
ال منطقة النص عنصر مثل أي عنصر إدخال عادي ولكنه يحتوي على مدخلات متعددة الأسطر. إنه مفيد عند تمرير المعلومات التي تتطلب أكثر من سطر واحد.
في ملف index.html ، يكون امتداد الملف علامة textarea يحدد العنصر قيمته من خلال أبنائه ، كما هو موضح في كتلة التعليمات البرمجية أدناه:
<منطقة النص>
مرحبا، كيف حالك؟
</textarea>
مع React ، لاستخدام منطقة النص عنصر ، يمكنك إنشاء عنصر إدخال بالنوع منطقة النص.
مثل ذلك:
وظيفةبرنامج() {يعود (
<استمارة>
<نوع الإدخال ='منطقة النص' الاسم ='رسالة'/>
</form>
)
}
بديل لاستخدام منطقة النص كنوع إدخال هو استخدام منطقة النص عنصر علامة بدلاً من علامة نوع الإدخال ، كما هو موضح أدناه:
وظيفةبرنامج() {يعود (
<استمارة>
<منطقة النص
الاسم ='رسالة'
القيمة ='مرحبا، كيف حالك؟'
/>
</form>
)
}
ال منطقة النص تحتوي العلامة على سمة قيمة تحتفظ بمعلومات المستخدم التي تم إدخالها في منطقة النص عنصر. هذا يجعلها تعمل كعنصر إدخال افتراضي في React.
العمل مع عنصر إدخال مربع الاختيار في React
تختلف الأمور قليلاً عند العمل معها خانة الاختيار المدخلات. حقل الإدخال من النوع خانة الاختيار ليس لديه سمة قيمة. ومع ذلك ، فإنه يحتوي على ملف التحقق يصف. هذا التحقق تختلف السمة عن سمة القيمة من خلال طلب قيمة منطقية لتحديد ما إذا كان المربع محددًا أو غير محدد.
على سبيل المثال:
وظيفةبرنامج() {يعود (
<استمارة>
<نوع الإدخال ='خانة الاختيار' معرف ='انضمام' الاسم ='ينضم' />
<التسمية htmlFor ='انضمام'>هل ترغب في الانضمام إلى فريقنا؟</label>
</form>
)
}
يشير عنصر التسمية إلى معرف عنصر الإدخال باستخدام أتش تي أم أل يصف. هذا أتش تي أم أل تأخذ السمة معرف عنصر الإدخال - في هذه الحالة ، انضمام. متى إنشاء نموذج HTML، ال أتش تي أم أل السمة تمثل ل يصف.
ال خانة الاختيار من الأفضل استخدامه كمدخل خاضع للرقابة. يمكنك تحقيق ذلك عن طريق إنشاء حالة وتخصيص القيمة المنطقية الأولية لها سواء كانت صواب أو خطأ.
يجب عليك تضمين اثنين من الدعائم على خانة الاختيار عنصر الإدخال: أ التحقق الملكية و على التغيير حدث مع وظيفة معالج ستحدد قيمة الحالة باستخدام setIsChecked () وظيفة.
على سبيل المثال:
وظيفةبرنامج() {مقدار ثابت [isChecked، setIsChecked] = React.useState (خطأ شنيع);
وظيفةالتعامل مع التغيير() {
setIsChecked ((prevState) =>! prevState)
}
يعود (
<استمارة>
<مدخل
اكتب ='خانة الاختيار'
معرف ='انضمام'
الاسم ='ينضم'
محدد = {isChecked}
onChange = {handleChange}
/>
<التسمية htmlFor ='انضمام'>هل ترغب في الانضمام إلى فريقنا؟</label>
</form>
)
}
تقوم كتلة التعليمات البرمجية هذه بإنشاء ملف مفحوص الدولة ، وتعيين قيمتها الأولية على خطأ شنيع. يحدد قيمة مفحوص الى التحقق السمة في عنصر الإدخال. ال التعامل مع التغيير ستطلق الدالة وتغير قيمة الحالة مفحوص إلى نقيضه كلما نقرت على مربع الاختيار.
من المحتمل أن يحتوي عنصر النموذج على عناصر إدخال متعددة من أنواع مختلفة ، مثل مربعات الاختيار والنص وما إلى ذلك.
في مثل هذه الحالات ، يمكنك التعامل معها بطريقة مماثلة للطريقة التي تعاملت بها مع عناصر إدخال متعددة من نفس النوع.
هذا مثال:
وظيفةبرنامج() {يترك[formData، setFormData] = React.useState (
{
الاسم الأول: ''
ينضم: حقيقي,
}
);
وظيفةالتعامل مع التغيير(حدث) {
مقدار ثابت {الاسم ، القيمة ، النوع ، محدد} = event.target ؛
setFormData ((prevState) => {
يعود {
...prevState,
[اسم]: يكتب خانة الاختيار؟ فحص: القيمة
}
})
}
يعود (
<استمارة>
<مدخل
اكتب ='نص'
نائب ='الاسم الأول'
الاسم ='الاسم الأول'
onInput = {handleChange}
القيمة = {formData.firstName}
/>
<مدخل
اكتب ='خانة الاختيار'
معرف ='انضمام'
الاسم ='ينضم'
محدد = {formData.join}
onChange = {handleChange}
/>
<التسمية htmlFor ='انضمام'>هل ترغب في الانضمام إلى فريقنا؟</label>
</form>
)
}
لاحظ أنه في ملف التعامل مع التغيير وظيفة، setFormData يستخدم عامل تشغيل ثلاثي لتعيين قيمة التحقق الخاصية لخصائص الحالة إذا كان نوع الإدخال الهدف هو خانة الاختيار. إذا لم يكن كذلك ، فإنه يقوم بتعيين قيم قيمة يصف.
يمكنك الآن التعامل مع نماذج React
لقد تعلمت كيفية التعامل مع النماذج في React باستخدام عناصر إدخال مختلفة للنموذج هنا. لقد تعلمت أيضًا كيفية تطبيق المدخلات التي يتم التحكم فيها على عناصر النموذج عن طريق إضافة خاصية value أو الخاصية المحددة عند العمل مع مربعات الاختيار.
ستؤدي المعالجة الفعالة لعناصر إدخال نموذج React إلى تحسين أداء تطبيق React ، مما يؤدي إلى تجربة مستخدم شاملة أفضل.