Функции-обработчики

При работе с React, как и в обычном HTML, мы хотим реагировать на действия пользователя: ввод текста, клики по кнопкам, отправку формы и т.д. Для этого используются функции-обработчики событий (event handlers), которые мы передаём через специальные атрибуты JSX — такие как onChange, onClick, onSubmit и другие.

Давайте на примере поля ввода (input) и метки (label) в компоненте App разберёмся, как добавить обработчик события в JSX.

Рефакторинг компонента App

В предыдущей статье вы узнали, как определять компоненты используя синтаксис стрелочной функции, давайте проведем небольшой рефакторинг нашего компонента App и изменим синтаксис определения компонента:

import { List } from './components/List';

function App() {
  return (
    <div>
      <h1>Frontend JavaScript frameworks</h1>
      <label htmlFor="search">Search: </label>
      <input id="search" type="text" />
      <hr />
      <List />
    </div>
  );
}

export default App;

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

Создание функции-обработчика события

Добавим функцию, которая будет вызываться при каждом вводе в поле. В React такие функции называют обработчиками (event handlers). Это может быть как обычная функция, так и стрелочная:

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  console.log('Input changed:', event.target.value);
};

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

Теперь привяжем эту функцию к полю ввода через атрибут onChange:

<input id="search" type="text" onChange={handleChange} />

В React используется handle как первое слово в имени функций-обработчиков событий — это общепринятая практика и стандартный стиль именования.

Проверка в браузере

Запустите приложение и откройте его в браузере. Откройте инструменты разработчика (DevTools) → вкладка Console. Теперь начните печатать в поле ввода — вы увидите сообщения в консоли с текущим значением поля.

Это работает благодаря синтетическому событию (synthetic event), которое React создаёт поверх нативного события браузера. Оно кросс-браузерное и содержит полезные методы (например, preventDefault()), чтобы предотвратить поведение по умолчанию (например, перезагрузку страницы при отправке формы).

Важные моменты

Синтетическое событие (SyntheticEvent) — это обёртка React над стандартным Event, которая делает работу с событиями более безопасной и одинаковой во всех браузерах.

Иногда вам нужно использовать объект event (например, чтобы получить event.target.value), а иногда — нет.

В JSX вы всегда передаёте функцию, а не результат её выполнения.

✅ Правильно:

<input onChange={handleChange} /> // передаём функцию

❌ Неправильно:

<input onChange={handleChange()} /> // вызываем функцию сразу — это ошибка

Заключение

Функции-обработчики в JSX — это способ "оживить" интерфейс, сделав его интерактивным. Вы можете использовать их для работы с вводом, кликами и другими действиями. Главное — передавать именно функцию, а не результат её выполнения.

С помощью onChange, onClick и других JSX-атрибутов вы легко добавите динамическое поведение в компоненты React.