Skip to content

Innlegg

Endre en React Input-verdi fra Vanilla Javascript

27. juli 2020 • 1 min lesing

Endre en React Input-verdi fra Vanilla Javascript

Det korte svaret:

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

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

Det lange svaret:

React overstyrer den native Javascript onChange-oppførselen. Å utløse en onChange-hendelse gjør ingenting for å endre input-feltets verdi i Reacts øyne. For React er verdien fortsatt uendret, selv om en bruker tydelig kan se verdien på skjermen. Koden ovenfor utløser endringen i React også.

Forfatter: Chuck Conway spesialiserer seg på programvareutvikling og Generativ AI. Koble til ham på sosiale medier: X (@chuckconway) eller besøk ham på YouTube.

↑ Tilbake til toppen

Du liker kanskje også