Come impostare lo stato attivo su un materiale TextField?

Question

Come posso impostare lo stato attivo su un componente material-ui TextField?

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

ho cercato sopra il codice, ma non funziona :(

Answer 1

È possibile utilizzare l'attributo autoFocus.

<TextField value="some value" autoFocus /> 

Answer 2

mi sono imbattuto in questa domanda cerca di soluzione per lo stesso problema Ho trovato circa autoFocus ma ho trovato che funziona solo quando la pagina viene caricata prima, non dopo la presentazione del modulo. Il modo in cui ho finalmente trovato è possibile aggiungere ref al figlio TextField e chiamare select() sul modulo di conferma:

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

e

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

Answer 3

autoFocus era anche non funzionava per me, forse perché questo è un componente che non è montato al caricamento dei componenti di livello superiore. Dovevo fare qualcosa di molto più contorto per farlo funzionare:

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

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

Nota che per qualche motivo non funziona senza la setTimeout. Per maggiori informazioni vedi https://github.com/callemall/material-ui/issues/1594.