Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie fokussiere ich ein Eingabefeld nach dem Rendern in React?

Susan Sarandon
Freigeben: 2024-11-03 07:41:30
Original
615 Leute haben es durchsucht

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

Fokus auf ein Eingabefeld nach dem Rendern in React setzen

React bietet mehrere Methoden zum Setzen des Fokus auf ein Eingabefeld, nachdem die Komponente gerendert wurde.

Option 1: Refs

Wie in der Dokumentation erwähnt, können Sie einen Ref verwenden, um auf den DOM-Knoten des Eingabefelds zuzugreifen. Dies kann durch Festlegen des ref-Attributs im Eingabefeld in der Renderfunktion erfolgen:

<input ref="nameInput" ... />
Nach dem Login kopieren

Nachdem die Komponente gemountet wurde, können Sie die focus()-Methode auf dem DOM-Knoten verwenden, um den Fokus festzulegen :

componentDidMount() {
  this.refs.nameInput.getInputDOMNode().focus();
}
Nach dem Login kopieren

Option 2: AutoFocus

Sie können auch die AutoFocus-Requisite verwenden, um eine Eingabe automatisch fokussieren zu lassen, wenn sie montiert ist:

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

Beachten Sie, dass in JSX AutoFocus groß geschrieben werden muss, anders als in einfachem HTML, wo die Groß-/Kleinschreibung nicht beachtet wird.

Durch die Verwendung einer dieser Optionen können Sie den Fokus nach dem Rendern einfach auf ein bestimmtes Textfeld setzen und so den Benutzer sicherstellen Komfort und Verbesserung des Benutzererlebnisses.

Das obige ist der detaillierte Inhalt vonWie fokussiere ich ein Eingabefeld nach dem Rendern in React?. 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