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

Question

Как настроить фокус на компоненте material-ui TextField?

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

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

Answer 1

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

<TextField value="some value" autoFocus /> 

Answer 2

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

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

и

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

Answer 3

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.