Modifier une valeur d'entrée React à partir de Javascript vanilla

La réponse courte :

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");

Référence : https://stackoverflow.com/a/52486921/17360

La réponse longue :

React remplace le comportement natif onChange de Javascript. Déclencher un événement onChange ne fait rien pour modifier la valeur du champ d’entrée aux yeux de React. Pour React, la valeur est toujours inchangée, même si pour un utilisateur la valeur peut clairement être vue à l’écran. Le code ci-dessus déclenche également le changement dans React.