Как установить фокус на MaterialUI TextField?

Ответ 1

Вы можете использовать атрибут autoFocus.

<TextField value="some value" autoFocus />

Ответ 2

autoFocus также не работал для меня, возможно, так как это компонент, который не монтируется при загрузке компонента верхнего уровня. Мне нужно было сделать что-то более замысловатое, чтобы заставить его работать:

const focusUsernameInputField = input => {
  if (input) {
    setTimeout(() => {input.focus()}, 100);
  }
};

return (
  <TextField
    hintText="Username"
    floatingLabelText="Username"
    ref={focusUsernameInputField}
  />
);

Обратите внимание, что по некоторым причинам он не работает без setTimeout. Для получения дополнительной информации см. Https://github.com/callemall/material-ui/issues/1594.

Ответ 3

Для Реакта 16.8.6 вы должны использовать свойство inputRef TextField, чтобы установить фокус. Я попробовал ref свойство, но оно не работает.

<TextField
  inputRef={input => input.focus()}
/>

Материал-интерфейс говорит:

inputRef: Используйте это свойство для передачи обратного вызова ref в собственный компонент ввода.

Ответ 4

Я наткнулся на эти вопросы, ища решение одной и той же проблемы. Я нашел около autoFocus, но обнаружил, что он работает только при первой загрузке страницы, а не после отправки формы. То, как я, наконец, нашел это, можно сделать, добавив ref к дочернему элементу TextField и вызывающему select() в форме submit:

<form onSubmit={this.onSubmit}>
            <TextField ref="amountComp" ... />
</form>

и

onSubmit(event: any): void {
    // save form
    (this.refs["amountComp"] as TextField).select();
};