Ссылка нуль внутри Popover

Question

Я пытаюсь автофокусировать элемент ввода при открытии поповера. Вот песочница для него: https://codesandbox.io/s/green-bash-x6bj4?file= / src / App. js

Проблема здесь в том, что текущее свойство всегда равно нулю в ref. Это тот случай, когда forwardRef может помочь? Я не очень осведомлен об этом, поэтому размещаю его.

Любая помощь очень ценится.

Answer 1

Поскольку вы управляете состоянием open via (асинхронно c), когда inputRef пытается получить элемент, состояние не было обновлено, а дочерние элементы Proper не были созданы. .

Вы можете добавить асинхронное ожидание к setState, чтобы все заработало.

const handleClick = async event => {
  await setAnchorEl(event.currentTarget);
  inputRef.current.focus();
};

Answer 2

Для этого не нужно использовать ссылку, просто добавьте автофокус для ввода:

<input autoFocus placeholder="search" />