Внесение данных в input react из внешнего подключаемого скрипта?

Question

[DemaNFox]

Всем здравствуйте. Пишу скрипт для автоматизации своих действий на сайте, но наткнулся на проблему, при вставке данных через консоль через input.value данные стираются при событиях blue и focus. Ранее спокойно вставлял так но тут проблема с реактом, я так понимаю я вставляю значение но при фокусировке на поле элемент ререндерится и поле обновляется так как значение не было сохранено в состояние.

Есть в хроме дополнение которое очень хорошо справляется с данной задачей, называется Auto Clicker - AutoFill, я пытался разобраться как оно работает но моих знаний к сожалению пока не достаточно.

От того и хочу спросить у знающих, можно ли как то внести данные из внешнего скрипта и что бы оно не затирало поля?

Или может есть кто может помочь с данной проблемой?

Пример на видео: https://youtu.be/VIomxrkUImE

Answer 1

[Александр Талалаев]

В целом нужен код. Но если человеческим языком:
Нов реакте принято не трогать значения напрямую через обращение к DOM элементам. У вас есть определенное состояние, привязанные переменные, разные мутаторы, слушатели событий и тп.
Поэтому когда вы в ручную ставите значение через input.value вы, скорее всего, нарушаете логику работы вашего приложения. И при фокусе внутренняя логика реакта срабатывает, сверяет текущее состояние приложение(сверяет данные) и приводит в соответствие с ним интерфейс(ваши инпуты).
А так как вы данные не меняли, у вас как бы обнуляется поле.
В целом переставайте думать html элементами. Думайте данными, меняйте данные, подключайте данные. Остальное просто интерфейс, который вы собираете как кирпичики подключая к ним провода с данными. Реакт уже сам берёт на себя обновление непосредственно того что будет уже в браузере отображаться. Ваша задача писать логику как это будет меняться, не трогая(почти всегда) сами эти элементы напрямую.
Поэтому откройте документацию по реакту, посмотрите ролики. Хотя бы базовые основы, там всё просто.

Comments

[DemaNFox]

В целом переставайте думать html элементами. Думайте данными, меняйте данные, подключайте данные. Остальное просто интерфейс, который вы собираете как кирпичики подключая к ним провода с данными.

Я это понимаю, и в целом стараюсь придерживаться данного подхода)
Проблема в данном случае в том, что приложение не мое, это сторонний сайт, и я только делаю скрипт для оптимизации своих задач, не имея доступу к коду самого проекта. Поэтому и смотрю варианты как можно реализовать.