Как установить фокус на текстовое поле materialUI?

Как я могу установить фокус на элемент material-ui TextField компонент?

componentDidMount() {
    ReactDom.findDomNode(this.refs.myControl).focus()
}

Я пробовал выше код, но он не работает :(

8
material-ui

3 ответов

можно использовать

11

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.

4

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

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

и 

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