Выбор ответа Middle Ref и DOM обновлено
Фокус сразу после показа
Вопрос
При клике поле появляется, но фокус не ставится, в консоли ошибка чтения focus у null. Почему?
function handleClick() {
setShow(true);
inputRef.current.focus();
}
// ...
{show && <input ref={inputRef} />}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Узел появится после рендера и коммита, а focus вызван раньше. setShow(true) только планирует рендер, DOM-узел input будет создан и записан в ref позже, при коммите.
Варианты ответа
setShowоткатывается, если сразу после него обратиться к ref- Нельзя вызывать
focusу React-элементов, только у DOM-узлов - Нужно передать
refчерезforwardRef, иначе он остаётсяnull - Узел появится после рендера и коммита, а
focusвызван раньшеправильный ответ
Разбор
setShow(true) только планирует рендер, DOM-узел input будет создан и записан в ref позже, при коммите. Исправления: autoFocus, фокус в эффекте или ref-колбэке, либо flushSync(() => setShow(true)) перед focus(). Никакого отката нет. focus вызывается у DOM-узла, это нормально. forwardRef тут не нужен: ref висит прямо на <input>.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.