Пишем AJAX компонент на React. Часть 3. Связываем AJAX запрос и обработку событий

В предыдущих статьях мы уже изучили отправку AJAX запроса, получение ответа от сервера и основы обработки событий. Теперь настало время объединить всё это вместе.

В качестве примера мы продолжим рассматривать тот же компонент таблицу, который написан нами ранее. Сделаем так, чтобы наш компонент мог обновлять своё содержимое с сервера по запросу пользователя (например, по нажатию кнопки).

Добавим перед таблицей кнопку для обновления.

Обратите внимание, что в компоненте React допускается только один корневой элемент!

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

Добавим в код компонента метод, который будет обрабатывать нажатие на эту кнопку.

Этот метод вызывает уже рассмотренный нами в самой первой статье метод получения данных с сервера. Для обновления больше ничего не требуется так как актуальные данные с сервера сразу же заменят с собой текущие данные в состоянии компонента и React автоматически обновит его в браузере.

Для того, чтобы механизм обновления заработал осталось только связать обработчик события клика с кнопкой.

Подобным образом можно отправлять AJAX запросы для любых событий.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *