Проблемы парсинга сайтов на JS фреймворке reactjs

Сегодня мне надо было парсить сайт на reactjs, и для этого мне требовалось сэмулировать заполнение формы. Чтобы отправить форму надо просто нажать на кнопку отправить, а это эмулируется очень легко - просто надо вызвать .click на элементе кнопки.

Самым логичным решением было бы попросту отказатся от эмуляции действия юзера, и просто самому слать HTTP запрос на сервер напрямую. Но из-за специфики задачи мне надо было именно эмулировать действия заполнения инпута.

Проблема началась именно когда надо было заполнять текстовые поля формы. Самый простой вариант, это замена .value у элемента input. Но это так неработает, вить сайты написанные на reactjs обычно шлют данные не через <form> с встроенной в браузер функцией submit. Они используют fetch, обычно POST запрос с json данными от заполненной формы. Обычно сайты использующие jquery, или ванильный javascript перед отправкой запроса сами забирают с инпутов данные через .value. 

Но это так неработает с фреймворками состояний. В случае когда используется фреймворк состояний вроде reactjs, то фреймворк берет на себя задачу изменять HTML синхронизируя его с своим состоянием, и изменением своего состояния при взаимодействии пользователя с сайтом (например нажатии кнопки, итд).

Когда подобный сайт отсылает данные формы, он забирает текущий стейт и кладет его в тело fetch запроса. Суть в том что тк я хочу поменять значение которое отправится на сервер, то надо ещё как то заставить reactjs поменять своё состояние.

Покопавшись в гугле я нагуглил эту статью:

https://chuckconway.com/changing-a-react-input-value-from-vanilla-javascript/

Там разобрано как можно стригерить reactjs чтобы он обновил свой внутренний стейт, а не только поменять DOM веб страницы.

Комментарии

Популярные сообщения из этого блога

DOS атака при помощи Python

Ведем телеграм канал через питон

Django migrations не видит изменения моделей