Skip to content

Articles

Changer la valeur d'un input React depuis du Javascript vanilla

27 juillet 2020 • 1 min de lecture

Changer la valeur d'un input React depuis du 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 changer la valeur du champ input aux yeux de React. Pour React, la valeur reste 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.

Auteur : Chuck Conway se spécialise dans l’ingénierie logicielle et l’IA générative. Connectez-vous avec lui sur les réseaux sociaux : X (@chuckconway) ou visitez-le sur YouTube.

↑ Retour en haut

Vous pourriez aussi aimer