MaterialUI TextFieldにフォーカスを設定するにはどうすればいいですか？

Question

material-ui TextFieldコンポーネントにフォーカスを設定するにはどうすればよいですか？あなたはautoFocus属性を使用することができます:(

Answer 1

を、私は、コードの上にしようとしているが、それは動作しません。

<TextField value="some value" autoFocus /> 

Answer 2

私は同じ問題への解決策を探して、この質問に出くわし

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

私は約autoFocusを見つけましたが、フォームの送信後ではなくページが最初に読み込まれたときにのみ動作することが判明しました。refを子に追加します。TextFieldと呼び出し先フォーム上のの提出：

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

と

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

Answer 3

autoFocusしても、これはトップレベルのコンポーネントの負荷に取り付けられていない構成要素であるかもしれないので、私のために働いていませんでした。私はそれを動作させるために、より多くの複雑な何かをしなければならなかった。何らかの理由でそれがsetTimeoutせずに動作しないことを

が

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

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

注意。詳細はhttps://github.com/callemall/material-ui/issues/1594を参照してください。