Articles
Changer la valeur d'un input React depuis du Javascript vanilla
27 juillet 2020 • 1 min de lecture

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.