معالجة خطأ حاصل عند إستعمال onBlur event

محمود سعداوي2 · 8 أبريل 2023

السلام عليكم.

في المثال التالي:

Capture.JPG.9718ffa8da52538f2ec71248ec3da475.JPG

عند القيام بfocus لأي عنصر تصعد label إلى الأعلى و أكتب أنا ما أريد.

المشكل الذي حصل لي هو في إستخدام onBlur حيث ترجع label إلى الأسفل دائما (ما أريده هو إذا كانت input فارغة ترجع إلى الأسفل أما إذا كانت input غير فارغة تبقى label في الأعلى.

قمت بالتجربة التالية

const [focus, setFocus] = useState(false)
const [idx, setIdx] = useState(null)
const handleFocus = (id) => {
setFocus(true)
setIdx(id)
}

const handleBlur = (e) => {
console.log(e.target.value)
if (values.email.length !== 0) {
setFocus(false)
}
}
<FormInput 
                  key = {wrap.id}
                  {...wrap}
                  value = {values[wrap.name]}
                  handleChange = {handleChange}
                  handleFocus = {handleFocus}
                  focus = {focus}
                  idx = {idx}
                  handleBlur = {handleBlur}
                />

*****************************************
FormInput.js
------------

<h5>{inputProps.title}</h5>
              <input 
                name = {inputProps.name} 
                type = {inputProps.type} 
                className = "input" 
                onChange = {handleChange}
                onFocus = {()=>handleFocus(inputProps.id)}
                onBlur = {handleBlur}
              />

شكرا لكم

Mustafa Suleiman · 8 أبريل 2023

مشكلتك تتمثل في الطريقة التي تتعامل بها مع حالة focus في حقل الإدخال، فحاليًا، تستخدم focus كمؤشر لمعرفة ما إذا كان حقل الإدخال يتم التركيز عليه أم لا.

وبالتالي، عندما يتم فقدان التركيز، يتم تحديث الحالة focus بالقيمة false، مما يؤدي إلى إعادة label إلى الأسفل بغض النظر عن ما إذا كانت القيمة غير فارغة أم لا.

بدلاً من ذلك، يمكنك استخدام حالة منفصلة لمعرفة ما إذا كان حقل الإدخال غير فارغٍ. يمكنك تحديث هذه الحالة في حدث onChange لحقل الإدخال وفي حالة كانت القيمة فارغة، فإنه يمكنك تحديث حالة focus إلى القيمة false في حدث onBlur.

وإذا كانت القيمة غير فارغة، فيمكنك ترك حالة focus دون تغيير، مما يسمح بالاحتفاظ بالتسمية في الأعلى.

يمكن تحديث الكود كما يلي:

const [hasValue, setHasValue] = useState(false);
const [focus, setFocus] = useState(false);
const [idx, setIdx] = useState(null);

const handleChange = (e) => {
  const { value } = e.target;
  setHasValue(value.length > 0);
  // ... أي تحديثات أخرى تريد إجراؤها عند تغيير القيمة
};

const handleFocus = (id) => {
  setFocus(true);
  setIdx(id);
};

const handleBlur = () => {
  if (!hasValue) {
    setFocus(false);
  }
};

<FormInput 
  key={wrap.id}
  {...wrap}
  value={values[wrap.name]}
  handleChange={handleChange}
  handleFocus={() => handleFocus(wrap.id)}
  focus={focus}
  idx={idx}
  handleBlur={handleBlur}
/>

المثال يتجاهل القيم الخاصة بـ values.email المذكورة في السؤال، ويستخدم بدلاً من ذلك القيمة الموجودة في e.target.value.

Kais Hasan · 8 أبريل 2023

يمكنك حل المشكلة عن طريق إضافة class معين للعنصر بشكل ديناميكي، بحيث تكون وضعت قواعد css تحدد كيفية تموضع ال label بناء على ذلك، مثال بسيط على ذلك باستعمال js, html, css بحيث يمكنك تطبيق الفكرة لديك:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            .float-container {
                border: solid 1px #ccc;
                padding: 0 8px;
                position: relative;
            }
            .float-container input {
                border: none;
                font-size: 16px;
                outline: 0;
                padding: 16px 0 10px;
            }
            label {
                font-size: 16px;
                position: absolute;
                transform-origin: top left;
                transform: translate(0, 16px) scale(1);
                transition: all .1s ease-in-out;
            }
            .float-container.active label {
                transform: translate(0, 4px) scale(.75);
            }
        </style>
    </head>
    <body>
        <div id="floatContainer" class="float-container">
            <label for="floatField"> Label </label>
            <input id="floatField" type="text" />
        </div>

        <script>
            const floatField = document.getElementById('floatField');
            const floatContainer = document.getElementById('floatContainer');
            floatField.addEventListener('focus', () => {
                floatContainer.classList.add('active');

            });
            floatField.addEventListener('blur', () => {
                if (floatField.value === "")
                {
                    floatContainer.classList.remove('active');
                }
            });
        </script>
    </body>
</html>

هنا نقوم بكتابة التحويل لل label، بحيث يعمل على class محدد، و نقوم بإضافة أو إزالة هذا ال class، حيث نقوم بإضافته في حالة ال focus و حذفه في حالة ال blur فقط إذا كان الدخل فارغاً.