レンダリング後に React の入力フィールドにフォーカスを設定するにはどうすればよいですか?

React でのレンダリング後の入力フィールドにフォーカスを設定する

コンポーネントのレンダリング後に特定の入力フィールドにフォーカスを設定することは、React のリファレンスシステム。 「ref」属性を使用して入力フィールドに参照を割り当てると、その DOM ノードにアクセスできるようになり、そのフォーカス状態を操作できるようになります。

ドキュメントで説明されているように、「」という名前の参照を設定できます。 nameInput」をレンダリング関数中に入力フィールドに入力します。ただし、重要な問題は、「focus()」メソッドをどこで呼び出すべきかということです。

最適な呼び出しポイント

最適な結果を得るには、「this」メソッドを呼び出す必要があります。 「componentDidMount」ライフサイクル メソッド内の .refs.nameInput.getInputDOMNode().focus()」メソッド。このメソッドは、コンポーネントがマウントされて DOM に挿入された直後に呼び出されます。ここで focus メソッドを呼び出すことで、コンポーネントが表示されるとすぐにフォーカスが設定されるようになります。

代替オプション

@Dhiraj のソリューションは、次の代替アプローチを提供します。 「autoFocus」プロップを利用します。このプロパティを true に設定すると、入力フィールドがマウントされたときに自動的にフォーカスするように指示されます。次のように使用できます。

<input autoFocus name=... />

大文字と小文字が区別されない HTML とは異なり、JSX では「autoFocus」を大文字にする必要があることに注意してください。

以上がレンダリング後に React の入力フィールドにフォーカスを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。