Ist es möglich, den Fokus auf ein Eingabeelement in einer meiner React-Komponenten zu legen, ohne dem Eingabe-Tag direkt einen Verweis zuzuweisen?

Question

Ich verliere Fokus meiner Text Eingabefelder, wenn die Komponente neu rendert. Ich kann den Fokus erneut auf ein <input> Element anwenden, indem ich einen Verweis (etwas wie die Antworten here) hinzufüge, aber was kann ich tun, wenn ich keinen Zugriff auf das <input> Element habe, weil es in einer benutzerdefinierten Komponente ist. Ich kann natürlich die Komponente bearbeiten oder ganz verzichten, aber ich frage mich, ob es eine andere Möglichkeit gibt, den Fokus wieder auf meine Textbox anzuwenden.

Ich habe eine benutzerdefinierte Komponente namens <TextInput>. Ich kann dieser Komponente einen Verweis hinzufügen, aber es endet auf dem äußeren <div> dieser Komponente und nicht auf dem <input>-Tag, das in meinem <TextInput> Element enthalten ist.

Bitte lassen Sie mich wissen, ob es trotzdem eine Referenz auf das innere <input> Element gibt, ohne meine Komponente zu modifizieren, oder wenn ich eine andere Strategie für die erneute Anwendung des Fokus nach der Neu-Rendering meiner Komponente verwenden könnte.

Bitte lassen Sie mich wissen, wenn ich unklar bin oder wenn Sie zusätzliche Informationen benötigen. Vielen Dank für Ihre Zeit.

Answer 1

Wenn ich Sie richtig verstehe, ist der Fokus verloren, wenn das input Element neu gerendert wird (weil ein Vorfahre davon neu gerendert wurde).
Wenn das der Fall ist, dann kann man so etwas tun:

<input ref={ (el) => el.focus() } /> 

Manchmal funktioniert dies besser mit einer kurzen Verzögerung:

<input ref={ (el) => setTimeout(() => el.focus(), 100) } />