Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie kann man in „React After Rendering' den Fokus auf ein Eingabefeld setzen?

Susan Sarandon
Freigeben: 2024-11-02 02:42:30
Original
328 Leute haben es durchsucht

How to Set Focus on an Input Field in React After Rendering?

Festlegen des Fokus auf ein Eingabefeld nach dem Rendern in React

Das Festlegen des Fokus auf ein bestimmtes Eingabefeld nach dem Rendern der Komponente kann durch React erreicht werden Ref-System. Indem Sie dem Eingabefeld mithilfe des Attributs „ref“ einen Verweis zuweisen, erhalten Sie Zugriff auf seinen DOM-Knoten und können so seinen Fokusstatus bearbeiten.

Wie in der Dokumentation erwähnt, können Sie einen Verweis mit dem Namen „ nameInput“ in Ihr Eingabefeld während der Renderfunktion. Die entscheidende Frage ist jedoch: Wo sollten Sie die Methode „focus()“ aufrufen?

Optimaler Aufrufpunkt

Für optimale Ergebnisse sollten Sie die Methode „this“ aufrufen .refs.nameInput.getInputDOMNode().focus()“-Methode innerhalb der „componentDidMount“-Lebenszyklusmethode. Diese Methode wird sofort aufgerufen, nachdem die Komponente gemountet und in das DOM eingefügt wurde. Indem Sie hier die Focus-Methode aufrufen, stellen Sie sicher, dass der Fokus gesetzt wird, sobald die Komponente sichtbar wird.

Alternative Option

@Dhirajs Lösung bietet einen alternativen Ansatz von Verwendung der „AutoFocus“-Requisite. Wenn diese Requisite auf „true“ gesetzt ist, weist sie das Eingabefeld an, automatisch zu fokussieren, wenn es gemountet wird. Sie können es wie folgt verwenden:

<input autoFocus name=... />
Nach dem Login kopieren

Beachten Sie, dass „autoFocus“ in JSX großgeschrieben werden sollte, im Gegensatz zu HTML, bei dem die Groß-/Kleinschreibung nicht berücksichtigt wird.

Das obige ist der detaillierte Inhalt vonWie kann man in „React After Rendering' den Fokus auf ein Eingabefeld setzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage