События

Событие — это действие пользователя: клик, ввод текста, отправка формы. В React обработчик события передают компоненту как атрибут, например onClick, — без addEventListener, который вы использовали в уроках про DOM.

Обработчик клика

Создайте src/components/HelloButton.jsx:

// src/components/HelloButton.jsx
export default function HelloButton() {
  function handleClick() {
    alert('Привет!');
  }
 
  return <button onClick={handleClick}>Поздороваться</button>;
}

Выведите <HelloButton /> в src/App.jsx и нажмите на кнопку — браузер покажет окно с текстом «Привет!». Обработчики принято называть с приставки handle: handleClick, handleSubmit.

Стрелочная функция прямо в атрибуте

Короткий обработчик можно написать на месте:

// src/components/HelloButton.jsx
export default function HelloButton() {
  return <button onClick={() => alert('Привет!')}>Поздороваться</button>;
}

Результат тот же. Стрелочная функция особенно удобна, когда в обработчик нужно передать аргумент.

Обработчик с аргументом

Пусть у каждой задачи будет кнопка, которая сообщает, какую задачу нажали:

// src/components/TodoItem.jsx
export default function TodoItem({ todo }) {
  function handleDelete(id) {
    console.log('Удалить задачу', id);
  }
 
  return (
    <li>
      {todo.text}
      <button onClick={() => handleDelete(todo.id)}>Удалить</button>
    </li>
  );
}

При нажатии в консоли браузера (F12, вкладка Console) появится, например, «Удалить задачу 2». Саму задачу пока удалить нельзя — для этого нужно состояние из следующего урока.

Объект события

Обработчик получает объект события. Для поля ввода из него берут введённый текст:

// src/components/SearchBox.jsx
export default function SearchBox() {
  function handleChange(event) {
    console.log(event.target.value);
  }
 
  return <input placeholder="Поиск" onChange={handleChange} />;
}

При каждом нажатии клавиши в консоль выводится текущий текст поля. В React onChange срабатывает сразу при вводе, а не после ухода из поля, как в обычном HTML.

Частые события

Отмена действия браузера

Метод event.preventDefault() отменяет стандартное поведение: например, переход по ссылке или перезагрузку страницы при отправке формы. Он понадобится в уроке про формы.

Частая ошибка

Функцию нужно передать, а не вызвать. Скобки после имени запускают её сразу при отрисовке:

// Неправильно: alert появится при загрузке страницы, а не по клику.
<button onClick={handleClick()}>Поздороваться</button>
 
// Правильно:
<button onClick={handleClick}>Поздороваться</button>
<button onClick={() => handleDelete(todo.id)}>Удалить</button>

Если нужен аргумент, оберните вызов в стрелочную функцию.