ホームページ >ウェブフロントエンド >jsチュートリアル >React で入力フィールドのフォーカスを設定するには?

React で入力フィールドのフォーカスを設定するには?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-04 03:56:29876ブラウズ

How to Set Input Field Focus in React?

React での入力フィールド フォーカスの設定

React アプリケーション内でユーザー インタラクションを管理する場合、多くの場合、フォーカスを特定の入力フィールドに向ける必要があります。ページのレンダリング後。これを実現する最善の方法について疑問が生じます。

React のドキュメントでは、refs の使用を推奨しています。これを行うには、render 関数内の「nameInput」などの入力フィールドに ref 属性を付加します。その後、メソッド「this.refs.nameInput.getInputDOMNode().focus();」を呼び出すことができます。

ただし、このメソッドでは、この呼び出しをどこに配置するかという問題が生じます。 Dhiraj の応答は、実行可能な解決策を提供します。React ライフサイクル メソッドのcomponentDidMount() にフォーカス呼び出しを配置し​​ます。

あるいは、使いやすさを考慮して、autoFocus プロパティを利用して、マウント時に入力を自動的にフォーカスすることもできます。

/>

JSX では、autoFocus プロパティは、単純な HTML とは異なり、大文字の F で書かれることに注意してください。大文字と小文字は区別されません。

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

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