React を使用してレンダリングした後に入力フィールドにフォーカスを設定する
-
React で
componentDidMount()メソッドを使用する -
React で
autoFocusProp メソッドを使用する - React でインライン Ref プロパティ メソッドを使用する
- まとめ
入力フィールドは、Web サイトのサーバーに送信する情報を入力する幅の広いバーです。 よくある例は、google.com の検索バーです。
この記事では、反応コンポーネントが Web ページにレンダリングされた後、入力フィールドにフォーカスするためのさまざまな方法を紹介します。
React で componentDidMount() メソッドを使用する
反応プロジェクトを開始するには、ターミナルから npx create-react-app exampleone を使用して新しいプロジェクトを作成します。その後、プロジェクト名に移動します。
componentDidMount() メソッドを適用すると、ページを表示した後に入力フィールドにフォーカスできるようになります。 この関数は、最初のページのレンダリング後までデータをロードせず、一度呼び出されるため、ページのロードを高速化するのに適しています。
コード スニペット - App.js:
import React, { Component } from "react";
class App extends Component {
componentDidMount() {
this.nameInput.focus();
}
render() {
return (
<div>
<input
defaultValue="It Won't focus"
/>
<input
ref={(input) => { this.nameInput = input; }}
defaultValue="It will focus"
/>
</div>
);
}
}
export default App;
React で autoFocus Prop メソッドを使用する
ページが初めてレンダリングされた後、入力フィールドはユーザーに対して自動的に強調表示されます。 この方法は、ページがロードされたときにユーザーが入力フィールドを簡単に見つけられるようにする、多くのコンテンツを含む Web サイトに最適です。
これらの機能が複数の要素に適用されると、最初の機能がフォーカスされるため、開発者はこの autoFocus 機能に注意する必要があります。
コード スニペット - App.js:
import React, { Component } from "react";
class App extends Component {
render() {
return(
<div>
<input
defaultValue="It Won't focus"
/>
<input autoFocus
defaultValue="It will focus"
/>
</div>
);
}
}
export default App;
React でインライン Ref プロパティ メソッドを使用する
このメソッドを使用して、レンダリング コンポーネント内にフォーカス関数を記述する必要があります。 この方法は、コーディングが簡単で、コードを別の開発者と共有する状況で理解しやすいため、最も便利です。
コード スニペット - App.js:
import React, { Component } from "react";
class App extends Component {
render() {
return(
<div>
<input
defaultValue="It Won't focus"
/>
<input
ref={(input) => {input && input.focus() }}
defaultValue="It will focus"
/>
</div>
);
}
}
export default App;
各メソッドが完了したら、npm start を使用してアプリケーションを実行します。
出力：
まとめ
React のフォーカス効果は、Web ページに美しさを加えながら入力をより明確にするため、ユーザーがスムーズで煩わしくないブラウジング体験を実現するのに役立つ方法です。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn