В статье написано. React переопределяет setter для свойства value. А они "родной" используют, который бы вызывался без React. Я так понимаю, что в родной реализации как раз вызываются нужные события, которые потом React ловит и обрабатывает. А React-овская реализация эти события не вызывает (видимо для скорости).
VC>Стремно как то попахивает.
Лишь бы работало. Хочешь не стрёмно — делай всё через React, как положено.
[React] Хитрый реакт не триггерит onChange у инпутов?
А так как каждое нажатие клавиши вызывает handleChange, который обновляет состояние React-компонента, значение в поле будет обновляться по мере того, как пользователь печатает.
То я сделал смену значения инпута через задницу:
const setValue = async (selector, value) => {
await context.evaluate(`document.getElementById('${selector}').focus()`);
await context.evaluate(`document.getElementById('${selector}').select()`);
for(let c of value) await context.Protocol.Input.dispatchKeyEvent({type:"keyDown", text:String(c)});
};
Но так не будет, я подозреваю, работать юникодные символы, Капсы, да и если текста надо 1M вбить то это растянется на вечность.
Помогите
Как сделать что бы
input.value = 'James';
заработало.
Точнее что бы реакт увидел новые значения. оставить временное решение тоже нельзя. нужно что бы любые значение можно было задавать, включая емоджи и не по одному символу за раз.
у метода dispatchKeyEvent на самом деле дофига параметров. Может он как то умеет сразу весь текст передавать но этого не понять
Единственное что я пробовал и оно не работает:
input.focus()
input.value='James';
input.blur();
P.S. я работаю через штатный удаленный отладчик хрома, но это совершенно не важно. Просто что бы не пугались моего временного решения.
В самом реакт-приложении я таким способом менять значение полей ввода я конечно не собираюсь.
VC>Видим что поле поменялось на форме.
VC>Что бы убедится, что в state поле пустое, просто щелкаем по полю Name и потом по другому полю. VC>Видим красную invalid-подсказку: Name cannot be empty
Я сначала думал что dispatchKeyEvent не сможет "эмулировать" нажатие юникодных символов но это не так. Они правильно передаются в параметре text.
и в цикле его не нужно вызывать по одной букве за раз.
Единственная проблема если новое значение пустое, то старый текст просто выделяется весь, но text="" старое значение не удаляет.
Как передать DEL или BACKSPACE?
Ops>А если Ops>
Дело не в том что в конструкторе нету параметра type
В ивенте надо не только тип но и остальные свойства — как минимум target.value
Во вторых наверно все же не type="change" а type=input с действием keydown и кодом клавиши, которое текущая внутренняя реализация маппит на SyntheticEvent с type="change" и target.value.
Вот эта привязка к реализации реакта мне и не нравится.
В третьих текущая реализация реакта в обработчике ивента трекает внутри предыдущее полное значение — в результате мешанина получается если задавать значение через input.value и потом досылать dispatchEvent вызовы.
А так input.focus() выделяет всё в input и потом первое нажатие клавиш удаляет всё предыдущее значение.
Если нужно пустое значение — это не будет работать. Надо как то backspace сначала послать. Вот в чем единственная проблема.
Ops>ЗЫ. Это не реакт, это браузер не генерирует событий при изменении value из кода.
Здравствуйте, Ops, Вы писали:
Ops>Здравствуйте, VladCore, Вы писали:
VC>>Это что то не ты ты написал.
Ops>Да вроде все то, выполняем на сайте по твоей ссылке эти 2 строчки, получаем искомый результат, без всяких плясок с эмуляцией ввода. Ops>
Здравствуйте, Ops, Вы писали:
VC>>У тебя какой браузер? В хроме Version 76.0.3809.132 (Official Build) (64-bit) не работает
Ops>ФФ. Проверил в хроме — действительно не пашет. Ops>Только оно чего-то и при вводе с клавиатуры как-то нестабильно работает.
Спасибо. Пашет то что нашел vsb с "перегрузкой" input.value. В хроме.
Мне надо удаленно и без перегрузки чего бы то нибыло в странице.
Финальный вариант с поддержкой Unicode, пустых значений и без циклов
