The short answer:
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");
Reference: https://stackoverflow.com/a/52486921/17360
The long answer:
React overrides the native Javascript onChange behavior. Triggering an onChange event does nothing to change the input field value in React’s eyes. To React the value is still unchanged, even though to a user the value can clearly be seen on the screen. The above code triggers the change in React also.
January 25, 2022 at 5:26 pm
Brilhante, parabéns
September 6, 2022 at 9:40 am
thanks, worked for me
December 20, 2022 at 10:18 am
also worked, thanks <3
April 27, 2023 at 4:58 pm
MVP! Thanks buddy