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

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

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!