Home-theater-designers
يمكن أن يكون العمل مع النماذج وعناصر النموذج عند التطوير باستخدام React معقدًا لأن عناصر نموذج HTML تتصرف بشكل مختلف نوعًا ما في React عن عناصر DOM الأخرى.
تعرف على كيفية العمل مع النماذج وعناصر النموذج مثل مربعات الاختيار ومناطق النص ومدخلات النص أحادي السطر.
إدارة حقول الإدخال في النماذج
في React ، غالبًا ما تتم إدارة حقل إدخال في نموذج عن طريق إنشاء حالة وربطها بحقل الإدخال.
اجعل فيديو اليوم
على سبيل المثال:
خدمة التوصيل التي تدفع أكثر
function App() {
const [firstName, setFirstName] = React.useState('');
function handleFirstNameChange(event) {
setFirstName( event.target.value )
}
return (
<form>
<input type='text' placeholder='First Name' onInput={handleFirstNameChange} />
</form>
)
}
أعلاه لدينا الاسم الاول دولة ، أ عند الإدخال الحدث ، وأ التعامل مع التغيير معالج. ال التعامل مع التغيير تعمل الوظيفة على كل ضغطة مفتاح لتحديث ملف الاسم الاول حالة.
قد يكون هذا الأسلوب مثاليًا عند العمل مع حقل إدخال واحد ، ولكن إنشاء حالات مختلفة ووظائف معالج لكل عنصر إدخال سيصبح متكررًا عند العمل مع حقول إدخال متعددة.
لتجنب كتابة التعليمات البرمجية المتكررة والمكررة في مثل هذه الحالات ، امنح كل حقل إدخال اسمًا مميزًا ، وقم بتعيين كائن كقيمة الحالة الأولية للنموذج الخاص بك ، ثم املأ الكائن بخصائص بنفس أسماء حقول الإدخال.
فمثلا:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
return (
<form>
<input type='text' placeholder='First Name' name='firstName' />
<input type='text' placeholder='Last Name' name='lastName' />
</form>
)
}
ال بيانات النموذج سيكون بمثابة متغير الحالة لإدارة وتحديث جميع حقول الإدخال داخل النموذج. تأكد من أن أسماء الخصائص في كائن الحالة مطابقة لأسماء عناصر الإدخال.
لتحديث الحالة ببيانات الإدخال ، أضف ملف عند الإدخال مستمع الحدث إلى عنصر الإدخال ، ثم اتصل بوظيفة المعالج التي تم إنشاؤها.
فمثلا:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
/>
</form>
)
}
استخدمت كتلة التعليمات البرمجية أعلاه ملف عند الإدخال الحدث ووظيفة المعالج ، handleFirstNameChange . هذه handleFirstNameChange ستعمل الوظيفة على تحديث خصائص الحالة عند استدعائها. ستكون قيم خصائص الحالة مماثلة لتلك الخاصة بعناصر الإدخال المقابلة لها.
تحويل مدخلاتك إلى مكونات خاضعة للرقابة
عند إرسال نموذج HTML ، يكون سلوكه الافتراضي هو الانتقال إلى صفحة جديدة في المستعرض. هذا السلوك غير مريح في بعض المواقف ، مثل عندما تريد التحقق من صحة البيانات التي تم إدخالها في النموذج . في معظم الحالات ، ستجد أنه من الأنسب أن يكون لديك وظيفة JavaScript مع إمكانية الوصول إلى المعلومات التي تم إدخالها في النموذج. يمكن تحقيق ذلك بسهولة في React باستخدام مكونات مضبوطة.
باستخدام ملفات index.html ، تحتفظ عناصر النموذج بتتبع حالتها وتعديلها استجابةً لإدخال المستخدم. باستخدام React ، تعدل وظيفة الحالة المحددة حالة ديناميكية مخزنة في خاصية حالة المكون. يمكنك الجمع بين الحالتين من خلال جعل حالة React المصدر الوحيد للحقيقة. بهذه الطريقة ، يتحكم المكون الذي يقوم بإنشاء نموذج في ما يحدث عندما يقوم المستخدم بإدخال البيانات. تسمى عناصر نموذج الإدخال ذات القيم التي تتحكم فيها React بالمكونات الخاضعة للرقابة أو المدخلات الخاضعة للرقابة.
للاستفادة من المدخلات المضبوطة في تطبيق React الخاص بك ، أضف قيمة prop إلى عنصر الإدخال الخاص بك:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
يتم الآن تعيين سمات قيمة عناصر الإدخال لتكون قيمة خصائص الحالة المقابلة. يتم دائمًا تحديد قيمة المدخلات من قبل الدولة عند استخدام مكون مضبوط.
التعامل مع عنصر إدخال Textarea
ال منطقة النص عنصر مثل أي عنصر إدخال عادي ولكنه يحتوي على مدخلات متعددة الأسطر. إنه مفيد عند تمرير المعلومات التي تتطلب أكثر من سطر واحد.
في ملف index.html ، يكون امتداد الملف علامة textarea يحدد العنصر قيمته من خلال أبنائه ، كما هو موضح في كتلة التعليمات البرمجية أدناه:
<textarea>
Hello, How are you?
</textarea>
مع React ، لاستخدام منطقة النص عنصر ، يمكنك إنشاء عنصر إدخال بالنوع منطقة النص .
مثل ذلك:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
بديل لاستخدام منطقة النص كنوع إدخال هو استخدام منطقة النص عنصر علامة بدلاً من علامة نوع الإدخال ، كما هو موضح أدناه:
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
ال منطقة النص تحتوي العلامة على سمة قيمة تحتفظ بمعلومات المستخدم التي تم إدخالها في منطقة النص عنصر. هذا يجعلها تعمل كعنصر إدخال افتراضي في React.
كيفية إيقاف تشغيل صوت الكاميرا على iPhone
العمل مع عنصر إدخال مربع الاختيار في React
تختلف الأمور قليلاً عند العمل معها خانة الاختيار المدخلات. حقل الإدخال من النوع خانة الاختيار لا يحتوي على سمة قيمة. ومع ذلك ، فإنه يحتوي على ملف التحقق ينسب. هذه التحقق تختلف السمة عن سمة القيمة من خلال طلب قيمة منطقية لتحديد ما إذا كان المربع محددًا أو غير محدد.
فمثلا:
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
يشير عنصر التسمية إلى معرف عنصر الإدخال باستخدام أتش تي أم أل ينسب. هذه أتش تي أم أل تأخذ السمة معرف عنصر الإدخال - في هذه الحالة ، انضمام. متي إنشاء نموذج HTML ، ال أتش تي أم أل السمة تمثل إلى عن على ينسب.
ال خانة الاختيار من الأفضل استخدامه كمدخل خاضع للرقابة. يمكنك تحقيق ذلك عن طريق إنشاء حالة وتخصيص القيمة المنطقية الأولية لها سواء كانت صواب أو خطأ.
يجب عليك تضمين اثنين من الدعائم على خانة الاختيار عنصر الإدخال: أ التحقق الملكية و على التغيير حدث مع وظيفة معالج ستحدد قيمة الحالة باستخدام setIsChecked () وظيفة.
فمثلا:
function App() {
const [isChecked, setIsChecked] = React.useState(false);
function handleChange() {
setIsChecked( (prevState) => !prevState )
}
return (
<form>
<input
type='checkbox'
id='joining'
name='join'
checked={isChecked}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
تقوم كتلة التعليمات البرمجية هذه بإنشاء ملف مفحوص الدولة ، وتعيين قيمتها الأولية على خاطئة . يحدد قيمة مفحوص الى التحقق السمة في عنصر الإدخال. ال التعامل مع التغيير ستطلق الدالة وتغير قيمة الحالة مفحوص إلى نقيضه كلما نقرت على مربع الاختيار.
من المحتمل أن يحتوي عنصر النموذج على عناصر إدخال متعددة من أنواع مختلفة ، مثل مربعات الاختيار والنص وما إلى ذلك.
في مثل هذه الحالات ، يمكنك التعامل معها بطريقة مماثلة للطريقة التي تعاملت بها مع عناصر إدخال متعددة من نفس النوع.
هذا مثال:
function App() {
let[formData, setFormData] = React.useState(
{
firstName: ''
join: true,
}
);
function handleChange(event) {
const {name, value, type, checked} = event.target;
setFormData( (prevState) => {
return {
...prevState,
[name]: type === checkbox ? checked : value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='checkbox'
id='joining'
name='join'
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
لاحظ أنه في ملف التعامل مع التغيير وظيفة، setFormData يستخدم عامل تشغيل ثلاثي لتعيين قيمة التحقق الخاصية لخصائص الحالة إذا كان نوع الإدخال الهدف هو خانة الاختيار . إذا لم يكن كذلك ، فإنه يقوم بتعيين قيم القيمة ينسب.
يمكنك الآن التعامل مع نماذج React
لقد تعلمت كيفية التعامل مع النماذج في React باستخدام عناصر إدخال مختلفة هنا. لقد تعلمت أيضًا كيفية تطبيق المدخلات المضبوطة على عناصر النموذج الخاصة بك عن طريق إضافة خاصية value أو الخاصية المحددة عند العمل مع مربعات الاختيار.
ستؤدي المعالجة الفعالة لعناصر إدخال نموذج React إلى تحسين أداء تطبيق React ، مما يؤدي إلى تجربة مستخدم شاملة أفضل.