Вопрос с собеседования · Frontend

Как обрабатывать события в React и передавать колбэки дочерним компонентам?

JuniorReact
Ещё спрашивают так:
  • Что такое синтетические события React?
Коротко

Обработчик передают функцией: onClick={handleClick} или onClick={() => remove(id)} — не onClick={handleClick()} (это вызов при рендере). Событие — синтетическое объединение над нативным с тем же API: e.preventDefault(), e.stopPropagation(), e.target. Родитель передаёт дочернему компоненту колбэк в props (onSelect), дочерний вызывает его с данными — так события поднимаются вверх.

  • Имена: props — onSomething, обработчики — handleSomething
  • Для форм — e.preventDefault() в onSubmit
  • React вешает обработчики на корень приложения (делегирование)

А ещё onClick={fn()} вызовет fn на каждом рендере — частая ошибка новичков

Подробно

function Item({ item, onDelete }: { item: Item; onDelete: (id: string) => void }) {
  return <button onClick={() => onDelete(item.id)}>Удалить</button>;
}

Что хотят услышать

  • Передача функции, а не её вызова.
  • Синтетические события.
  • Колбэки от родителя.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗onClick={handleClick()} — правильный способ передать обработчик, а колбэк ребёнку не нужен
  • ✓Обработчик передают функцией, событие синтетическое, ребёнку дают колбэк в props
  • ✗В React нельзя вызвать preventDefault, поэтому отправку формы отменяют через return false
  • ✗Дочерний компонент меняет состояние родителя напрямую, без передачи колбэков в props

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования