Этап 1 из 12 · ≈ 3 ч

События

Основа с Junior

Обработчики событий, передача колбэков детям и синтетические события.

function Search({ onSearch }) {
  const [q, setQ] = useState("");
  return (
    <form onSubmit={(e) => { e.preventDefault(); onSearch(q); }}>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      <button>Найти</button>
    </form>
  );
}

Что важно знать

  • Передавать функцию, а не вызывать её: onClick={handleClick}, а не onClick={handleClick()}.
  • Данные текут вниз через props, события — вверх через колбэки (onSearch, onChange).
  • React вешает обработчики на корень приложения (делегирование) и передаёт синтетическое событие с тем же интерфейсом, что у браузерного.
  • e.stopPropagation() и e.preventDefault() работают как обычно.
  • Обработчик видит состояние на момент рендера — замыкание. Отсюда «устаревшее состояние» в таймерах и подписках.

Критерии освоения

Junior ≈ 3 ч

  • Обрабатывает события и передаёт колбэки от родителя к дочерним компонентам
  • Объясняет, почему обработчик видит состояние на момент рендера

Практика. Сделать компонент поиска, который сообщает родителю запрос по отправке формы.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

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

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

Полный разбор
Почему обработчик видит «старое» значение состояния?Junior

Каждый рендер — снимок: функции компонента замыкают значения state этого рендера. setState не меняет переменную сразу, а планирует новый рендер. Поэтому setCount(count + 1) три раза подряд даёт +1: все три вызова видят одно и то же count. Если новое значение…

Полный разбор
Что такое всплытие и перехват событий и как работает делегирование?Junior

Событие проходит три фазы: перехват (от window вниз к цели), цель, всплытие (от цели вверх). Обработчики по умолчанию срабатывают на всплытии. Делегирование — один обработчик на родителе ловит события детей через всплытие и определяет источник по event.target…

Полный разбор
Как работает useState?Junior

const [value, setValue] = useState(initial) — React хранит значение вне функции компонента, привязав его к позиции хука; при следующих рендерах возвращает текущее. setValue планирует перерисовку; если новое значение равно старому (Object.is) — рендер…

Полный разбор

Документация

← Вся карта «React»

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

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

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

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