Posts
Alterando um Valor de Input do React a partir de Javascript Vanilla
27 de julho de 2020 • 1 min de leitura
A resposta curta:
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");
Referência: https://stackoverflow.com/a/52486921/17360
A resposta longa:
React substitui o comportamento nativo do onChange do Javascript. Disparar um evento onChange não faz nada para alterar o valor do campo de input nos olhos do React. Para o React, o valor ainda está inalterado, mesmo que para um usuário o valor possa ser claramente visto na tela. O código acima dispara a mudança no React também.
Autor: Chuck Conway é um Engenheiro de IA com quase 30 anos de experiência em engenharia de software. Ele constrói sistemas de IA práticos—pipelines de conteúdo, agentes de infraestrutura e ferramentas que resolvem problemas reais—e compartilha o que está aprendendo ao longo do caminho. Conecte-se com ele nas redes sociais: X (@chuckconway) ou visite-o no YouTube e no SubStack.