React: يستبدل الملء التلقائي في Chrome القيم الموجودة على المكونات الخاضعة للرقابة

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

فمثلا. اكتب سلسلة في حقل الاسم الأول ... سيؤدي رد فعل إلى تحديث خاصية القيمة إلى كل ما كتبته. جرب ميزة الملء التلقائي للبريد الإلكتروني وستستبدل حقل الاسم الأول.

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

هناك طريقة أخرى للتغلب عليها وهي onChange ، تحديث autocomplete = this.state.value. وسوف يتعرف الكروم على عدم الإكمال التلقائي لهذا الحقل لسبب ما. (الإكمال التلقائي = إيقاف التشغيل لا يعمل ... يجب أن يكون أي سلسلة عشوائية) إذا كانت فارغة وكانت قيمة this.state.value فارغة ، فسيظل الملء التلقائي يعمل في الحقل كما هو متوقع.

^ ^ هذا صحيح. إليك مثال عملي باستخدام اقتراح onChange: https://jsfiddle.net/epicfaace/9p17e2qx/29/

مثير جدا! هذا أحد الآثار الجانبية لمزامنة سمة / خاصية القيمة على المدخلات التي لم أكن على علم بها من قبل (شكرًا ، @ mabeabe28):

إذا كانت سمة القيمة مماثلة لخاصية القيمة ، يفترض Chrome أن الإدخال "لم يتم تغييره" ، وسيحل محل خاصية القيمة أثناء إجراء الملء التلقائي

أتساءل عما إذا كان هذا صحيحًا في المتصفحات الأخرى.

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

https://codesandbox.io/s/01zr8pll00

إذا كانت سمة القيمة مماثلة لخاصية القيمة ، يفترض Chrome أن الإدخال "لم يتم تغييره" ، وسيحل محل خاصية القيمة أثناء إجراء الملء التلقائي

قد يتم حل هذا جزئيًا على الأقل بواسطة # 13525 ("إيقاف عكس قيم الإدخال في سمة القيمة").