ホームページ  >  記事  >  ウェブフロントエンド  >  レンダリング後に React の入力フィールドにフォーカスを設定するにはどうすればよいですか?

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

Susan Sarandon
Susan Sarandonオリジナル
2024-11-02 02:42:30327ブラウズ

How to Set Focus on an Input Field in React After Rendering?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:Dom と仮想 Dom次の記事:Dom と仮想 Dom