Посты
Изменение значения React Input из Vanilla Javascript
27 июля 2020 г. • 1 мин чтения
Краткий ответ:
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");
Ссылка: https://stackoverflow.com/a/52486921/17360
Подробный ответ:
React переопределяет поведение встроенного Javascript onChange. Запуск события onChange не приводит к изменению значения поля ввода с точки зрения React. Для React значение остается неизменным, даже если пользователь может ясно видеть значение на экране. Приведенный выше код запускает изменение и в React.
Автор: Chuck Conway — инженер AI с почти 30-летним опытом разработки программного обеспечения. Он создает практические системы AI — конвейеры контента, агенты инфраструктуры и инструменты, которые решают реальные проблемы — и делится тем, что он узнает на этом пути. Свяжитесь с ним в социальных сетях: X (@chuckconway) или посетите его на YouTube и на SubStack.