Skip to content

Posts

Alterando um Valor de Input React a partir de Javascript Vanilla

27 de julho de 2020 • 1 min de leitura

Alterando um Valor de Input React a partir de Javascript Vanilla

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:

O 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 aos 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 é especialista em engenharia de software e IA Generativa. Conecte-se com ele nas redes sociais: X (@chuckconway) ou visite-o no YouTube.

↑ Voltar ao topo

Você também pode gostar