Каждое приложение, которое вы видите в интернете, каким-то образом взаимодействует с пользователем: клики по кнопкам, ввод текста, прокрутка страницы. Эти действия называются событиями, и React даёт нам удобный способ работать с ними. Сегодня мы разберёмся, как управлять событиями в React, что такое синтетические события, и создадим форму поиска, которая реагирует на нажатие кнопки.

Как работать с событиями в React

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

Добавление событий

В обычном JavaScript вы добавляете события через методы, например:

document.getElementById('myButton').addEventListener('click', handleClick);

В React события добавляются прямо в JSX, как атрибуты:

<button onClick={handleClick}>Нажми меня</button>

Названия событий пишутся в camelCase (например, onClick, onMouseEnter).

Вместо строк, как в HTML, вы передаёте функцию-обработчик:

<button onClick={() => console.log('Кнопка нажата')}>Нажми</button>

Обработчики событий

Обработчик — это просто функция, которая вызывается, когда происходит событие. Например:

function handleClick() {
  console.log('Кнопка нажата!');
}

Пример

Вот простой пример использования обработчика событий:

function App() {
  const handleClick = () => {
    console.log('Привет, мир!');
  };

  return <button onClick={handleClick}>Нажми меня</button>;
}

Когда вы нажимаете кнопку, в консоли появляется сообщение.

Синтетические события vs события DOM

В React события называются синтетическими. Но что это значит?

Что такое синтетические события?

React использует собственный слой обработки событий. Вместо работы напрямую с событиями DOM, он использует объекты SyntheticEvent. Это обёртка над событиями DOM, которая делает их кросс-браузерными.

Преимущества:

• Автоматическая поддержка всех браузеров.
• Унифицированный интерфейс, независимо от специфики браузера.

Отличия синтетических событий

Синтетическое событие выглядит и ведёт себя почти так же, как событие DOM, но есть небольшие нюансы:

• Синтетические события имеют тот же API, что и события DOM (например, e.target, e.preventDefault()).
• После завершения обработки, синтетическое событие перезапускается (сбрасывается). Это помогает оптимизировать производительность.

Пример:

function App() {
  const handleClick = (event) => {
    console.log(event.type); // "click"
    console.log(event.target); // элемент, на который нажали
  };

  return <button onClick={handleClick}>Нажми</button>;
}

Как передавать параметры в обработчики событий

Часто возникает необходимость передать параметр в функцию-обработчик. В React это делается просто.

Передача через стрелочную функцию

Вы можете использовать стрелочную функцию:

function handleClick(message) {
  console.log(message);
}

<button onClick={() => handleClick('Привет, React!')}>Нажми меня</button>

Использование аргументов события

Событие (event) автоматически передаётся в обработчик. Если вам нужно передать дополнительные данные, укажите их первыми:

function handleClick(id, event) {
  console.log(`ID: ${id}, Тип события: ${event.type}`);
}

<button onClick={(e) => handleClick(1, e)}>Нажми</button>

Практика: форма поиска с кнопкой «Найти»

Теперь, когда вы понимаете основы работы с событиями, давайте создадим форму поиска. Она будет содержать поле ввода и кнопку «Найти». При нажатии на кнопку запрос из поля ввода будет выводиться в консоль.

Шаг 1: Создание компонента

Откройте файл App.jsx и добавьте следующий код:

import React, { useState } from 'react';

function SearchForm() {
  const [query, setQuery] = useState(''); // Состояние для хранения ввода пользователя

  const handleInputChange = (event) => {
    setQuery(event.target.value); // Обновляем состояние при вводе текста
  };

  const handleSearch = () => {
    console.log(`Поисковый запрос: ${query}`); // Выводим запрос в консоль
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px', margin: '0 auto' }}>
      <input
        type="text"
        value={query}
        onChange={handleInputChange}
        placeholder="Введите запрос"
        style={{
          width: '100%',
          padding: '10px',
          marginBottom: '10px',
          fontSize: '16px',
        }}
      />
      <button
        onClick={handleSearch}
        style={{
          width: '100%',
          padding: '10px',
          backgroundColor: '#007BFF',
          color: 'white',
          fontSize: '16px',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
        }}
      >
        Найти
      </button>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Поиск</h1>
      <SearchForm />
    </div>
  );
}

export default App;

Шаг 2: Запускаем приложение

Запустите приложение:

npm run dev

Откройте приложение в браузере. Вы увидите поле ввода и кнопку «Найти».

Введите текст в поле и нажмите кнопку. В консоли появится сообщение с введённым запросом.

Как это работает

• Состояние query: Мы используем хук useState, чтобы хранить текст, который вводит пользователь.
• onChange: Поле ввода вызывает handleInputChange при каждом изменении текста, обновляя состояние query.
• onClick: Кнопка вызывает handleSearch, когда на неё нажимают. Функция берёт текущее значение query и выводит его в консоль.

Дополнительное задание: добавляем проверку ввода

Давайте добавим проверку, чтобы кнопка «Найти» ничего не делала, если поле ввода пустое.

Обновите функцию handleSearch:

const handleSearch = () => {
  if (!query.trim()) {
    console.log('Поле поиска пустое');
    return;
  }
  console.log(`Поисковый запрос: ${query}`);
};

Теперь, если пользователь нажмёт кнопку, не введя текст, в консоли появится сообщение «Поле поиска пустое».

Итоги

Сегодня мы разобрались с событиями в React:

• События в React работают как в DOM, но через слой синтетических событий.
• Мы научились добавлять обработчики, передавать параметры и использовать данные события.
• На практике создали простую форму поиска, которая реагирует на ввод текста и нажатие кнопки.