入力タグに直接参照を割り当てずに、Reactコンポーネントの1つの入力要素にフォーカスを適用することはできますか？

Question

コンポーネントが再レンダリングされるときに、テキスト入力ボックスのフォーカスが失われています。 Ref（hereのようなもの）を追加して<input>要素にフォーカスを再適用できますが、<input>要素がカスタムコンポーネント内にあるためアクセスできない場合はどうすればよいでしょうか。私は明らかにコンポーネントを編集したり、それを完全に使用したりすることはできますが、テキストボックスにフォーカスを再適用する別の方法があるのだろうかと思います。

<TextInput>というカスタムコンポーネントがあります。このコンポーネントにrefを追加できますが、<TextInput>要素に含まれる<input>タグではなく、このコンポーネントの外側の<div>になります。

<input>要素に変更を加えずにrefを適用するかどうか、またはコンポーネントの再レンダリング後にフォーカスを再適用するための別の方法を使用できるかどうかを教えてください。

ご不明な点や追加情報が必要な場合は教えてください。あなたのお時間をありがとうございました。

Answer 1

私が正しく理解していれば、input要素が再レンダリングされるとフォーカスが失われます（祖先が再レンダリングされたため）。
その場合は、あなたのようなものを行うことができます。

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

を時々これは、短い遅延で良い作品：

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