Skip to content

Beiträge

Ändern eines React Input-Werts mit Vanilla Javascript

27. Juli 2020 • 1 Min. Lesezeit

Ändern eines React Input-Werts mit Vanilla Javascript

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.

↑ Zurück nach oben

Das könnte dir auch gefallen