Cambiar el Valor de un Input de React desde Javascript Vanilla

27 de julio de 2020 • 1 min de lectura

La respuesta corta:

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

Referencia: https://stackoverflow.com/a/52486921/17360

La respuesta larga:

React sobrescribe el comportamiento nativo de onChange de Javascript. Disparar un evento onChange no hace nada para cambiar el valor del campo de entrada desde la perspectiva de React. Para React el valor sigue sin cambios, aunque para un usuario el valor se puede ver claramente en la pantalla. El código anterior también dispara el cambio en React.