اذهب إلى المحتوى
  • 0

ما الفرق بين onChange و onInput في React؟

Adam Ebrahim

السؤال

لاحظت في بعض الفيديوهات يقوم المدرب بإستخدام onInput وليس onChange ولا أعرف الفرق بينهما، حتى بعد أن جربت تبديلهما لم أجد إختلاف، بحثت عن الإختلاف بينهما لكن أغلب الإجابات ليس لها علاقة بـ React نفسه، فما الفرق بينهما ومتى أستعمل كل واحد منهما؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

لا يوجد فرق بينهما في آلية العمل فهما يفعلان نفس الشيئ لكن الفرق الوحيد
هو أنك عندما تكتب حرف سيعمل onChange + onInput لكن عندما تقوم بعمل select لل input ( بالضغط double click داخله ) وتقوم بكتابة نفس الحرف لن تعمل onChange ولكن ستعمل onInput
 قم بتنفيذ السابق ومتابعة الكونسول هنا من هنا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

الفرق بينهما ان onInput سوف يُنفذ مع اي تغيير يحدث داخل الinput field كمثال 

اما بالنسبه للOnChange سيحدث التغيير بالمدخلات عندما يكون الfocus خارج الinput field , طالما الfocus علي الinput field او انك لم تضغط خارجه لن يحدث التغيير

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_oninput

يمكنك تجربه هذا المثال سيوضح لك الفرق كثيرا 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

أغلب الإجابات ليس لها علاقه ب React بشكل كبير لعدم وجود فرق onChange و onInput في ريأكت 

ولكن الفرق يظهر في حالة كنت تستخدم vanilla js حيث أن 

  1. onInput: سوف يعمل بالضبط مثل onChange في ريأكت. أي عند تغير أي قيمه داخل ال input سوف يتم تنفيذ الكول باك الموجود داخل ال onInput يمكنك تجربة هذا الأمر من خلال هذا الرابط
  2. onChange: سوف يعمل فقط بعد الإنتهاء من كتابة ماتريد داخل ال input والضغط على أي شئ خارج الإنبوت أي عمل focus على أي شئ أخر.

يمكنك تجربة وملاحظة الفرق بين onChange و onInput  في  كلا من ريأكت و جافاسكريبت من خلال هذا الرابط 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

إذا كنت تستخدم vanilla js فهن متشابهات عدا الاختلاف البسيط كما قال الأخ

بتاريخ On 4/2/2021 at 12:02 قال Abdullah Muhammad:

أغلب الإجابات ليس لها علاقه ب React بشكل كبير لعدم وجود فرق onChange و onInput في ريأكت 

ولكن الفرق يظهر في حالة كنت تستخدم vanilla js حيث أن 

  1. onInput: سوف يعمل بالضبط مثل onChange في ريأكت. أي عند تغير أي قيمه داخل ال input سوف يتم تنفيذ الكول باك الموجود داخل ال onInput يمكنك تجربة هذا الأمر من خلال هذا الرابط
  2. onChange: سوف يعمل فقط بعد الإنتهاء من كتابة ماتريد داخل ال input والضغط على أي شئ خارج الإنبوت أي عمل focus على أي شئ أخر.

يمكنك تجربة وملاحظة الفرق بين onChange و onInput  في  كلا من ريأكت و جافاسكريبت من خلال هذا الرابط 

واختلاف آخر يمكنك استخدام onchange في عنصر <select>

اما من ناحية React يتم استخدام onchange ولايوجد فرق في React

https://reactjs.org/docs/forms.html

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...