[解決済み] レンダリング後に入力フィールドにフォーカスを設定するには?
2022-03-19 01:25:51
質問内容
コンポーネントがレンダリングされた後、特定のテキストフィールドにフォーカスを設定する反応方法は何ですか?
ドキュメントでは、例えばrefsを使うことが推奨されているようです。
セット
ref="nameInput"
をレンダー関数で入力フィールドに追加し、呼び出します。
this.refs.nameInput.getInputDOMNode().focus();
しかし、これをどこに呼び出せばいいのでしょうか?何カ所か試してみましたが、うまくいきません。
どのように解決するのですか?
で行う必要があります。
componentDidMount
そして
refs callback
の代わりに 次のようなものです。
componentDidMount(){
this.nameInput.focus();
}
class App extends React.Component{
componentDidMount(){
this.nameInput.focus();
}
render() {
return(
<div>
<input
defaultValue="Won't focus"
/>
<input
ref={(input) => { this.nameInput = input; }}
defaultValue="will focus"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>
関連
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] スクロールした後に要素が表示されているかどうかを確認するには?
-
[解決済み] JavaScriptでテキスト入力フィールドの値を取得するにはどうすればよいですか?
-
[解決済み] Reduxの非同期フローになぜミドルウェアが必要なのか?
-
[解決済み] React.jsでテキスト入力のchange/focusOutイベントを正しくキャッチする方法とは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vueのクラススタイルの使い方の詳細
-
Vueでルートネスティングを実装する例
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
JavaScriptのgetElementById()メソッド入門
-
jq は html ページとデータを動的に分割する。