React: Warnung beim Ändern von Typ und Wert eines Eingabefeldes

Sieht so aus, als würden wir die Änderungen an den Requisiten in einer schlechten Reihenfolge anwenden. Die Logik, um dies richtig zu machen, ist im Allgemeinen lösbar (für bekannte Typen), kann jedoch komplex sein, um perfekt zu werden, wenn wir DOM-Operationen minimieren möchten.

Ich bin überrascht, dass dieser spezielle Fall problematisch ist, da dieser Code sicherstellen sollte, dass wir immer .type vor allen anderen Attributen auf einem <input> :

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

Ich bin mir nicht sicher, warum das nicht wie geplant funktioniert. Mir ist nicht ganz klar, ob der Einstellungstyp zuerst immer solche Fälle löst oder der Einstellungstyp zuerst einfach die gleiche Warnung verursacht, wenn Sie in die andere Richtung wechseln.

(Siehe auch # 2242, was möglicherweise geschehen soll, aber im aktuellen System möglicherweise nur schwer sauber zu implementieren ist. Es war einfacher, wenn wir vollständige Composite-Wrapper für diese Komponenten hatten, aber wir tun dies nicht mehr. Erstellen eines neuen Elements, wann immer Die Typänderungen könnten überraschend sein, da dies bedeuten würde, dass sich der Verweis auf diese Komponente während der Lebensdauer der Komponente ändert, die wir anderswo nie haben.)

Die einfachste Problemumgehung besteht darin, ein key für die Eingabe festzulegen, die sich mit dem Typ ändert, sodass ein neues Eingabeelement erstellt wird, wenn sich der Typ ändert.

Könnte durch den Bestellfehler von Object.assign V8 verursacht werden? Oder war das vor 15?

@gaearon Dies ist noch in der 15 Version

@ Gurinderhans Welcher Browser? Können Sie auch eine jsfiddle bereitstellen, die das Problem demonstriert?

@jimfb Hier geht's.
Browser: Chrome 50.0.2661.86 (64-Bit)
JSFiddle: https://jsfiddle.net/mb90na04/1/

Nach dem Chrome-Debugger fand ich Folgendes:
Es gibt diese Codezeile https://github.com/facebook/react/blob/master/src/renderers/dom/shared/ReactDOMComponent.js#L829 , die nach einem Anruf bei https://github.com/ facebook / react / blob / master / src / renderers / dom / client / wrappers / ReactDOMInput.js # L221 und dann wird versucht, den Wert der Eingabe zu ändern, während _updateDOMProperties noch nicht zum Aktualisieren aufgerufen wurde das Element type Attribut, daher wird die Warnung generiert. Sobald _updateDOMProperties aufgerufen wird, wird type vor value , wie es angenommen wird, und alles läuft nach Plan.

_ PS: Natürlich entfernt das Entfernen des Aufrufs von ReactDOMInput.updateWrapper innerhalb von switch case die Warnung, aber dies kann in einigen anderen Fällen erforderlich sein, da ich auch bemerke, dass es aufgerufen wird, wenn Element type ist textarea ._

Sie können nach Typänderungen suchen und keinen Wert festlegen oder den Typ aktualisieren und dann den Wert innerhalb von ReactDOMInput.updateWrapper festlegen. Ich frage mich auch, warum der Anruf für Fälle wie <input> oder <textarea> erforderlich ist

Hier ist ein einfacher Fall, der das Problem reproduziert: https://jsfiddle.net/97gr5e65/1/

Es scheint nur zu passieren, wenn von number zu text gewechselt wird. Ich kann die Warnung auch nicht in Safari oder Firefox unter OS X reproduzieren. Sie scheint auch nicht mit ReactTestUtils aufzutreten.

Dies war ein interessanter Fehler, den ich überprüfen musste, also habe ich ein bisschen herumgestochert. Mein erster Gedanke war nur, type vor value im updateWrapper zuzuweisen. Ist das gesund?

https://github.com/facebook/react/compare/master...nhunzaker : nh-input-change-fix? expand = 1

Es beseitigt den Fehler, ist aber zu einfach. Es fühlt sich flach an. Was denken Sie?

Können wir die .updateWrapper -Anrufe unter den _updateDOMChildren -Anruf verschieben (sie von den getNativeProps-Aufrufen aufteilen)? Ich denke, das ist die beste Lösung hier und es sieht so aus, als ob es funktionieren sollte.

Ja. Ich konnte auch eine Testberichterstattung darüber erhalten. Der Wert wird vom DOM ungültig, wenn sich der Typ so ändert, dass der Wert nicht mehr gültig ist, oder wenn ein neuer Wert zugewiesen wird, der nicht gültig ist.

Unabhängig davon ist es ziemlich cool, dass JSDOM dies aufgreift.

Fertig in https://github.com/facebook/react/pull/7333

Kommt immer noch mit der Version 16.4.1