Проблемы парсинга сайтов на 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 веб страницы.
Комментарии
Отправить комментарий