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

Учимся реагировать на действия пользователя: клики, ввод, отправку формы — через пропсы-обработчики.

Обработчик события — функция, которую React вызовет, когда произойдёт событие (клик, ввод, наведение); передаётся как проп вроде onClick.

onClick: передаём функцию, а не вызов

Обработчик передают как проп в camelCase. Главное — передать саму функцию, а не результат её вызова:

function Button() {
  function handleClick() {
    console.log("Клик!");
  }
  return <button onClick={handleClick}>Жми</button>;
}

Частая ошибка новичка — поставить скобки:

<button onClick={handleClick()}>Жми</button>   // ❌

Со скобками handleClick() вызовется сразу при рендере, а не по клику, и в onClick попадёт его результат (undefined). Нужно передать ссылку: onClick={handleClick}.

Передача аргументов

Если обработчику нужен аргумент, оберните вызов в стрелочную функцию — тогда вызов произойдёт по клику, а не при рендере:

function List({ items, onRemove }) {
  return (
    <ul>
      {items.map((it) => (
        <li key={it.id}>
          {it.text}
          <button onClick={() => onRemove(it.id)}>✕</button>
        </li>
      ))}
    </ul>
  );
}

Запись onClick={() => onRemove(it.id)} — это «вызови onRemove(it.id), когда кликнут».

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

React передаёт обработчику объект события. Из него берут полезные данные — например, текст из поля ввода через e.target.value:

function SearchBox() {
  function handleChange(e) {
    console.log("Ввели:", e.target.value);
  }
  return <input onChange={handleChange} placeholder="Поиск" />;
}

preventDefault для форм

Чтобы отправка формы не перезагружала страницу, в обработчике onSubmit вызывают e.preventDefault():

function Form() {
  function handleSubmit(e) {
    e.preventDefault(); // отменяем перезагрузку страницы
    console.log("Форма отправлена");
  }
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Отправить</button>
    </form>
  );
}

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

Итог

• Обработчик передают функцией: onClick={handleClick} — без скобок, иначе вызов произойдёт при рендере.
• Для аргументов оборачивайте в стрелку: onClick={() => onRemove(id)}.
• Объект события даёт e.target.value; e.preventDefault() отменяет перезагрузку при onSubmit.