Beiträge
Ändern eines React Input-Werts mit Vanilla Javascript
27. Juli 2020 • 1 Min. Lesezeit

Die kurze Antwort:
function setNativeValue(element, value) {
let lastValue = element.value;
element.value = value;
let event = new Event("input", { target: element, bubbles: true });
// React 15
event.simulated = true;
// React 16
let tracker = element._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
element.dispatchEvent(event);
}
var input = document.getElementById("ID OF ELEMENT");
setNativeValue(input, "VALUE YOU WANT TO SET");
Referenz: https://stackoverflow.com/a/52486921/17360
Die ausführliche Antwort:
React überschreibt das native Javascript onChange-Verhalten. Das Auslösen eines onChange-Events bewirkt nichts, um den Input-Feldwert in Reacts Augen zu ändern. Für React ist der Wert immer noch unverändert, obwohl ein Benutzer den Wert deutlich auf dem Bildschirm sehen kann. Der obige Code löst die Änderung auch in React aus.
Autor: Chuck Conway ist spezialisiert auf Software-Engineering und Generative KI. Verbinden Sie sich mit ihm in den sozialen Medien: X (@chuckconway) oder besuchen Sie ihn auf YouTube.