Фокус на поле, скрытом состоянием
Условие
Кнопка <button class="toggle"> показывает поле <input class="field">, скрытое состоянием. При появлении поле должно получать фокус. Скрытие возвращает состояние назад.
Что проверяют тесты
поле скрыто изначально
появляется и получает фокус
повторное переключение скрывает
фокус ставится и после повторного показа
Как подойти
Ловушка в том, что вызов focus прямо в обработчике клика не сработает: на этот момент поле ещё не смонтировано. Правильное место - эффект с зависимостью от состояния видимости, он выполняется после применения изменений к DOM. Решение через setTimeout тоже сработает, но это обход, а не понимание: оно зависит от того, что рендер успеет произойти раньше таймера. Третий вариант - атрибут autoFocus, но он сработает только при монтировании и молча перестанет работать, если поле начнут скрывать через CSS вместо размонтирования.
Подсказки: 3
- В момент обработчика клика поля в дереве ещё нет - состояние применится к следующему рендеру.
- Эффект выполняется после того, как React обновил DOM.
- Зависимость эффекта - признак видимости.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.