Come posso impostare lo stato attivo su un componente material-ui TextField?Come impostare lo stato attivo su un materiale TextField?
componentDidMount() {
ReactDom.findDomNode(this.refs.myControl).focus()
}
ho cercato sopra il codice, ma non funziona :(
È possibile utilizzare l'attributo autoFocus.
<TextField value="some value" autoFocus />
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();
};
Questo non funziona in modo nativo in React. –
Cosa vuoi dire sul fatto che "non funziona in modo nativo in React"? AFAIK 'ref' è il modo di React di rendere disponibile l'elemento DOM di sottolineatura in modo che tu possa fare cose come ... chiama plain javascript' domelement.select() 'per mettere a fuoco! O forse sei confuso circa il secondo pezzo di codice che è dattiloscritto e non javascript? –
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.
NB è autoFocus –
Grazie! Buona pesca. –
Funziona quando la pagina viene caricata, ma non dopo che il modulo è stato inviato. –