Ändern eines React-Eingabewerts aus 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 lange Antwort:

React überschreibt das native Javascript-onChange-Verhalten. Das Auslösen eines onChange-Events ändert nichts am Eingabefeldwert aus Reacts Perspektive. Für React ist der Wert immer noch unverändert, obwohl ein Benutzer den Wert auf dem Bildschirm deutlich sehen kann. Der obige Code löst die Änderung auch in React aus.