В предыдущих статьях мы уже изучили отправку AJAX запроса, получение ответа от сервера и основы обработки событий. Теперь настало время объединить всё это вместе.
В качестве примера мы продолжим рассматривать тот же компонент таблицу, который написан нами ранее. Сделаем так, чтобы наш компонент мог обновлять своё содержимое с сервера по запросу пользователя (например, по нажатию кнопки).
Добавим перед таблицей кнопку для обновления.
1 |
1 |
После добавления кнопки таблица перестала быть единственным корневым элементом, поэтому чтобы компонент сохранил свою работоспособность потребовалось поместить таблицу и кнопку в контейнер (div).
Добавим в код компонента метод, который будет обрабатывать нажатие на эту кнопку.
1 2 3 |
refreshData() { this.loadData(); } |
Этот метод вызывает уже рассмотренный нами в самой первой статье метод получения данных с сервера. Для обновления больше ничего не требуется так как актуальные данные с сервера сразу же заменят с собой текущие данные в состоянии компонента и React автоматически обновит его в браузере.
Для того, чтобы механизм обновления заработал осталось только связать обработчик события клика с кнопкой.
1 |
<a classname="btn btn-success" onclick="{()"> this.refreshData()}>Обновить</a> |
Подобным образом можно отправлять AJAX запросы для любых событий.
Добавить комментарий