首頁  >  文章  >  web前端  >  如何在 React 中設定輸入欄位焦點?

如何在 React 中設定輸入欄位焦點?

Susan Sarandon
Susan Sarandon原創
2024-11-04 03:56:29828瀏覽

How to Set Input Field Focus in React?

在React 中設定輸入欄位焦點

在React 應用程式中管理使用者互動時,通常需要將其焦點定向到特定的輸入欄位頁面渲染後。問題在於實現此目的的最佳方法。

React 文件建議使用 refs:為此,請將 ref 屬性附加到渲染函數中的輸入字段,例如「nameInput」。隨後,您可以呼叫方法「this.refs.nameInput.getInputDOMNode().focus();」來使輸入欄位成為焦點。

但是,此方法引入了在哪裡進行此呼叫的問題。 Dhiraj 的回應提供了一個可行的解決方案:將焦點呼叫放在 React 生命週期方法 componentDidMount() 中。

或者,為了方便使用,您可以利用autoFocus 屬性在安裝時自動將輸入置於焦點中:

/>

請注意,在JSX 中,autoFocus 屬性是用大寫的F 編寫的,與純HTML 不同,它是不區分大小寫。

以上是如何在 React 中設定輸入欄位焦點?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn