Wie fokussiere ich ein Eingabefeld nach dem Rendern 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" ... />

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();
}

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=... />

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!