React: بالنسبة للإدخال المتحكم فيه ، لا تعمل الخطوة كما هو متوقع ما لم تتم تهيئتها باستخدام قيمة فارغة أو "".

أرى سلوكًا خاصًا جدًا مع هذا الكمان في كل من Chrome 64 على Windows 10 و Firefox 52 على دبيان. إذا قمت بكتابة 50000 في الإدخال ثم نقرت على الفور على السهم لأعلى ، فسأحصل على 50100. إذا قمت بكتابة 50000 في الإدخال ، فانقر في مكان آخر في المستند ، ثم انقر فوق السهم لأعلى ، فسأحصل على 55000.

لست بحاجة إلى تغيير القيمة ، انقر فوق السهم لأعلى عدة مرات وسيبدأ في التغيير إلى أرقام لا معنى لها.

شكرا لتقريرandyboyne. تنبع المشكلة من حقيقة أننا لا نقوم بتحديث السمة value على مدخلات الأرقام حتى يتم تعتيم الحقل. نقوم بذلك لتجنب مجموعة من السلوك غير المرغوب فيه المتعلق بالتحقق من صحة المتصفح. ccnhunzaker.

يجب حل ذلك بمجرد أن نتوقف أخيرًا عن مزامنة السمة value للمدخلات الخاضعة للرقابة https://github.com/facebook/react/issues/11896.

نعم. في الواقع أتساءل عما إذا كان ينبغي علينا الحصول على جدول زمني معًا بشأن هذا الأمر.

كما ذكرنا ، إنها مشكلة مزامنة ، تتم مزامنة الحقل عندما يكون الحقل غير واضح.
لذلك أضفت بعض console.log واكتشفت أن e.target.value و e.target.getAttribute ("القيمة") غير متزامنتين بينما الحقل غير واضح.
لذا فإن الحل هو إضافة e.target.setAttribute ("القيمة" ، e.target.value) ؛ لفرض تحديث هذه القيمة ثم تعمل كما هو متوقع.

       onChange={e => {
        console.log("target" , e.target.value);
        console.log("getAttribute value",  e.target.getAttribute("value"));
        e.target.setAttribute("value",e.target.value); 
        this.setState({value: e.target.value, step: e.target.value / 10});
      }}

لا ، لا تزال هذه مشكلة ، إنها تدفعني إلى الجنون ، ما زلنا لم نبسط المدخلات التي يتم التحكم فيها بواسطة الإصدار 16!