Jak ustawić fokus na materialu TextField?

Question

Jak ustawić fokus na komponencie material-ui TextField?

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

Próbowałem powyżej kodu, ale to nie działa :(

Answer 1

Można użyć atrybutu autoFocus.

<TextField value="some value" autoFocus /> 

Answer 2

natknąłem to pytanie szuka rozwiązania tego samego problemu Znalazłem około autoFocus, ale okazało się, że działa tylko wtedy, gdy strona ładuje się po raz pierwszy, a nie po przesłaniu formularza. Sposób, w jaki udało mi się go znaleźć, polega na dodaniu ref do dziecka TextField i wywołanie select() na formularzu przedłożyć:

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

i

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

Answer 3

autoFocus nie pracuje również dla mnie, być może, ponieważ jest to element, który nie jest zamontowany, gdy ładunki składowe najwyższego poziomu. Musiałem zrobić coś o wiele bardziej zawiłe, aby zmusić go do pracy:

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

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

Należy zauważyć, że z jakiegoś powodu nie działa bez setTimeout. Aby uzyskać więcej informacji, patrz https://github.com/callemall/material-ui/issues/1594.