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

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

React では、コンポーネントのレンダリング後に入力フィールドにフォーカスを設定するためのいくつかの方法が提供されています。

オプション 1: Refs

ドキュメントで説明されているように、ref を使用して入力フィールドの DOM ノードにアクセスできます。これは、レンダリング関数の入力フィールドに ref 属性を設定することで実行できます。

<input ref="nameInput" ... />

その後、コンポーネントがマウントされた後、DOM ノードで focus() メソッドを使用してフォーカスを設定できます。 :

componentDidMount() {
  this.refs.nameInput.getInputDOMNode().focus();
}

オプション 2: AutoFocus

autoFocus プロパティを使用して、マウント時に入力が自動的にフォーカスされるようにすることもできます:

<input autoFocus name=... />

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

これらのオプションのいずれかを利用することで、レンダリング後に特定のテキスト フィールドに簡単にフォーカスを設定でき、ユーザーが利便性とユーザーエクスペリエンスの向上を実現します。

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