Пишем AJAX компонент на React. Часть 2. Основы обработки событий

В предыдущей статье мы создали основу AJAX компонента на React.JS. В этой статье мы продолжим работу с этим компонентом и рассмотрим на его примере реализацию обработки событий.

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

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

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

Напишем метод обработчик. Сортировку мы будем выполнять на стороне клиента (именно поэтому AJAX запросов не будет). Мы будем получать исходный массив JSON с данными из состояния компонента, а после сортировки сохранять уже отсортированный массив обратно в состояние.

Как определить, по какому столбцу выполнять сортировку? Это можно сделать различными способами. Но, чтобы излишне не усложнять пример, мы ограничимся простой передачей имени поля JSON объекта в качестве параметра метода обработчика.

На механизме сортировки JSON массива я подробно останавливаться не станем, так как он достаточно подробно описан в [1].

Теперь изменим заголовок таблицы таким образом, чтобы по клику на его ячейках вызывался наш обработчик. В целях usability поместим текст ячеек заголовка в гиперссылку.

this.columnHeaderClick(‘Login’)}>Имя пользователя this.columnHeaderClick(‘FIO’)}>Ф.И.О. this.columnHeaderClick(‘UserRole’)}>Роль this.columnHeaderClick(‘Ban’)}>Заблокирован

Вот в общем-то и всё, что нам требуется для решения нашей задачи.

При сохранении изменённого JSON массива в состоянии, оно будет изменяться и React автоматически обновит компонент в браузере.

Обратите внимание, что в React для имён атрибутов событий используется стиль написания camel casing. В частности событие onclick в React обозначается как onClick.

Также при работе с событиями следует учитывать стиль вызова методов обработчиков.

Многие статьи и руководства предлагают вызывать обработчики простым способом известным любому JavaScript разработчику. Например:

Но, в таком случае потребуется привязка объекта this в конструкторе компонента, так как по умолчанию текущий объект в метод обработчик не передаётся.

И так для каждого метода обработчика.

К счастью, есть более простой способ решить эту проблему. Достаточно просто вызвать метод в формате лямбда выражения.

Собственно, в приведённом примере используется именно этот подход.

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

Источники
  1. Как отсортировать JSON объект на JavaScript. Блог Александра Волкова.

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

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