تجنب الأخطاء: التعامل مع مدخلات الأرقام في React

عند استخدام عنصر بنوع number، قد تواجه بعض التحديات في استرجاع القيمة عندما تكون غير صالحة. على سبيل المثال، عندما يتم إدخال قيمة غير صالحة مثل ‘e’، قد يتم تجاهلها تمامًا أو تحويلها إلى قيمة فارغة.

في React، عندما تستخدم حدث onChange لمراقبة التغييرات في ، يمكنك استخدام دالة التعامل مع الحدث للتحقق من صحة القيمة المدخلة واسترجاعها حتى في حالة عدم صحتها. هنا نظرة عامة على كيفية تحقيق ذلك:

javascriptCopy code
onChange(event) {
  const value = event.target.value;
  if (!isNaN(value)) {
    console.log(value); // إذا كانت القيمة صالحة، ستتم طباعتها
  } else {
    console.log('Invalid value'); // إذا كانت القيمة غير صالحة، يتم طباعة رسالة خطأ
  }
}

render() {
  return (
    <form noValidate>
      <input type="number" onChange={this.onChange} />
    form>
  );
}

في هذا المثال، نستخدم دالة isNaN() لفحص ما إذا كانت القيمة المدخلة صالحة أم لا. إذا كانت القيمة غير صالحة، سيتم طباعة رسالة خطأ، وإذا كانت صالحة، سيتم طباعة القيمة نفسها. هذا يسمح لك بالتحكم بشكل أفضل في كيفية التعامل مع القيم غير الصالحة والحفاظ على تجربة المستخدم.

يمكنك أيضًا استخدام مكتبات مثل yup أو validator.js لإجراء التحقق من القيم في مرحلة ما قبل التقديم، وهو أمر مفيد إذا كان لديك متطلبات تحقق من البيانات معقدة أو إذا كنت ترغب في إعادة استخدام قواعد التحقق في أماكن متعددة من التطبيق الخاص بك.

بالتأكيد، دعنا نوسع قليلاً على هذا الموضوع.

عند استخدام في HTML، يتوقع المستخدمون أن يكون المدخل صالحًا للأرقام فقط. ومع ذلك، يمكن أن يكون هناك حالات حيث يدخل المستخدم قيمًا غير صالحة، مثل الحروف أو الرموز. في مثالنا، نرغب في التعامل مع هذه الحالات والتأكد من أن التطبيق يستجيب بشكل مناسب.

في مثال الكود السابق، استخدمنا دالة isNaN() لفحص صحة القيمة المدخلة. هذه الدالة تعيد true إذا كانت القيمة غير رقمية، و false إذا كانت رقمية. وبناءً على هذا التحقق، قمنا بطباعة القيمة إذا كانت صالحة ورسالة خطأ إذا كانت غير صالحة.

إذا كنت ترغب في مستوى أعلى من التحقق، يمكنك استخدام مكتبات تحقق من البيانات مثل yup أو validator.js. هذه المكتبات تسمح لك بتعريف قواعد التحقق المخصصة وتطبيقها على البيانات قبل إرسالها. بالإضافة إلى ذلك، يمكنك استخدامها لتوحيد منطق التحقق في تطبيقك، مما يقلل من إعادة كتابة الشفرة ويجعل صيانة التحقق أكثر سهولة.

مثلاً، في حال استخدام yup، يمكنك تعريف مخطط للبيانات وتحديد القواعد التي يجب أن تتبعها القيم:

javascriptCopy code
import * as yup from 'yup';

const schema = yup.object().shape({
  numberInput: yup.number().required().positive().integer(),
});

// في دالة التعامل مع الحدث
onChange(event) {
  const value = event.target.value;
  schema.isValid({ numberInput: value })
    .then(valid => {
      if (valid) {
        console.log(value); // قيمة صالحة
      } else {
        console.log('Invalid value'); // قيمة غير صالحة
      }
    });
}

هذا المثال يستخدم yup لتعريف مخطط للبيانات، وفي دالة onChange، يتم التحقق من صحة القيمة بناءً على هذا المخطط.

باستخدام الأدوات المناسبة، يمكنك توفير تجربة مستخدم سلسة وفعالة حتى في وجود بيانات غير صالحة، مما يجعل تطبيقك أكثر موثوقية واستقراراً.