React: تحذير عند تغيير نوع وقيمة حقل الإدخال

يبدو أننا نطبق تغييرات الدعامة بترتيب سيئ. المنطق للحصول على هذا الحق قابل للحل بشكل عام (للأنواع المعروفة) ، ولكن قد يكون معقدًا للحصول على الكمال إذا أردنا تقليل عمليات DOM.

أنا مندهش من أن هذه الحالة بالذات هي مشكلة لأن هذا الرمز يجب أن يضمن أننا دائمًا ما نضع .type قبل أي سمات أخرى على <input> :

https://github.com/facebook/react/blob/0b1fd186855a48dff78987f13466cec1e579b78c/src/renderers/dom/client/wrappers/ReactDOMInput.js#L74

لست متأكدًا من سبب عدم عمل ذلك كما هو مُصمم. ليس من الواضح تمامًا بالنسبة لي ما إذا كان نوع الإعداد أولاً يحل دائمًا مثل هذه الحالات أو نوع الإعداد أولاً سيؤدي ببساطة إلى نفس التحذير عند التبديل في الاتجاه الآخر.

(راجع أيضًا # 2242 ، وهو شيء قد نرغب في حدوثه ولكن قد يكون من الصعب تنفيذه بشكل نظيف في النظام الحالي. كان الأمر أسهل عندما كان لدينا أغلفة مركبة كاملة لهذه المكونات ولكننا لم نعد نفعل ذلك. إنشاء عنصر جديد كلما قد تكون تغييرات النوع مفاجئة لأنها قد تعني أن المرجع الخاص بهذا المكون يتغير خلال عمر المكون الذي لم يكن لدينا في أي مكان آخر.)

أسهل حل بديل هنا هو تعيين key على الإدخال الذي يتغير مع النوع بحيث يتم إنشاء عنصر إدخال جديد عندما يتغير النوع.

هل يمكن أن يكون سبب خطأ طلب Object.assign V8؟ أم كان هذا قبل 15؟

gaearon هذا لا يزال في الإصدار 15

gurinderhans أي متصفح؟ أيضًا ، هل يمكنك تقديم jsfiddle يوضح المشكلة؟

jimfb هنا تذهب.
المتصفح: Chrome 50.0.2661.86 (64 بت)
JSFiddle: https://jsfiddle.net/mb90na04/1/

بعد مصحح أخطاء الكروم وجدت هذا:
يوجد هذا السطر من التعليمات البرمجية ، https://github.com/facebook/react/blob/master/src/renderers/dom/shared/ReactDOMComponent.js#L829 ، والذي يقوم بعد ذلك بإجراء مكالمة إلى https://github.com/ facebook / رد فعل / blob / master / src / renderers / dom / client / wrappers / ReactDOMInput.js # L221 ثم تمت محاولة تغيير قيمة الإدخال بينما لم يتم استدعاء _updateDOMProperties بعد للتحديث العنصر type ، وبالتالي يتم إنشاء التحذير. مرة واحدة _updateDOMProperties يسمى، type تستعد قبل value ، مثل ذلك هو أن نفترض أن كل شيء يسير وفقا للخطة.

_ ملاحظة: بالطبع ، إزالة المكالمة إلى ReactDOMInput.updateWrapper ، داخل switch case يزيل التحذير ، ولكن قد يكون هذا مطلوبًا في بعض الحالات الأخرى حيث ألاحظ أيضًا أنه يتم استدعاؤه إذا كان العنصر type هو textarea ._

يمكنك التحقق من تغيير النوع ، وليس تعيين القيمة ، أو نوع التحديث ثم تعيين القيمة داخل ReactDOMInput.updateWrapper . أتساءل أيضًا عن سبب طلب المكالمة في حالات مثل <input> أو <textarea>

إليك حالة أبسط تُعيد إظهار المشكلة: https://jsfiddle.net/97gr5e65/1/

يبدو أنه يحدث فقط في حالة التغيير من number إلى text . لا يمكنني أيضًا إعادة إنتاج التحذير في Safari أو Firefox على OS X. كما يبدو أنه لا يحدث باستخدام ReactTestUtils .

كان هذا خطأ مثيرًا للاهتمام يجب التحقق منه ، لذلك قمت ببعض البحث. كان تفكيري الأولي هو تعيين type قبل value في ملف updateWrapper. هل هذا عاقل؟

https://github.com/facebook/react/compare/master...nhunzaker : nh-input-change-fix؟ قم بتوسيع = 1

إنه يزيل الخطأ ، لكنه بسيط للغاية. إنه شعور ضحل. ما رأيك؟

هل يمكننا نقل مكالمات .updateWrapper أقل من _updateDOMChildren (فصلها عن مكالمات getNativeProps)؟ أعتقد أن هذا هو أفضل حل هنا ويبدو أنه يجب أن يعمل.

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

غير مرتبط ، من الرائع أن تلتقط JSDOM هذا الأمر.

حرر في https://github.com/facebook/react/pull/7333

لا يزال يحدث مع الإصدار 16.4.1