如何將焦點設置爲materialUI TextField？

如何將焦點設置爲material-ui TextField組件？如何將焦點設置爲materialUI TextField？

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

我曾嘗試上面的代碼，但它不工作:(

來源

2016-06-21 Giles Bradshaw

可以使用autoFocus屬性。

<TextField value="some value" autoFocus />

來源

2016-06-22 09:56:49

注意它是autoFocus –

謝謝！接得好。 –

它在頁面加載時起作用，但在表單提交後不起作用。 –

-1

我碰到這個問題，跌跌撞撞尋找解決同樣的問題。我發現約autoFocus，但發現它只適用於頁面第一次加載時，而不是表單提交後。我最終發現它可以做到的方式是通過添加一個ref給兒童TextField和呼叫select()的形式提交：

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

和

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

來源

2017-06-07 12:42:16

這在React中本身不起作用。 –

你甚至認爲它「在React中本身不起作用」？ AFAIK'ref'是React提供強調DOM元素的方式，因此您可以執行如下操作：調用純javascript'domelement.select（）'設置焦點！或者，也許你對第二塊代碼是打字稿而不是javascript感到困惑？ –

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。

來源

2017-06-16 11:05:35

如何將焦點設置爲materialUI TextField？

回答

相關問題