ブログ

May 09, 2023

React Hook Form を使用して React でフォームを構築する方法

Crea e convalida moduli React con il minimo sforzo.edificio

最小限の労力で React フォームを構築して検証します。

React アプリケーションでのフォームの構築は複雑で時間がかかる場合があります。 React Hook Form ライブラリを利用すると、高パフォーマンスのフォームを React アプリケーションに簡単に追加できます。

React Hook Form は、React でフォームを構築するためのライブラリであり、複雑で再利用可能なフォームを作成するプロセスを簡素化します。 React アプリを構築したい場合は、React Hook Form ライブラリを使用して React でフォームを構築する方法を学ぶ必要があります。

React Hook Form の使用を開始するには、npm または Yarn パッケージ マネージャーを使用してインストールする必要があります。

npm を使用して React Hook Form をインストールするには、ターミナルで次のコマンドを実行します。

糸を使用して React Hook Form をインストールするには、次のコマンドを実行します。

React Hook Form を使用してフォームを作成するには、使用フォーム針。 の使用フォームフックを使用すると、React アプリケーションでフォームを構築および管理するために使用するメソッドとプロパティにアクセスできます。

以下に、その使用方法を示す例を示します。使用フォーム針：

React Hook Form ライブラリは、登録する入力値をフックに登録するメソッド。 の登録するメソッドはフォームの入力フィールドを React Hook Form ライブラリに接続し、ライブラリが入力フィールドを追跡して検証できるようにします。

上記のコード ブロックでは、「firstname」という名前の入力を登録します。 のハンドル送信React Hook Form ライブラリのメソッドは、フォームの送信を処理します。

フォームの送信を処理するには、コールバック関数を渡します。送信時にハンドル送信方法。 の送信時関数は、すべてのフォーム入力の値を含むオブジェクトを受け取ります。

の登録するメソッドを使用すると、入力フィールドの検証ルールを設定できます。 入力フィールドに検証を追加するには、検証ルールを含むオブジェクトを 2 番目の引数としてオブジェクトに渡します。登録する方法。

そのようです：

この例では、「名」入力フィールドに 1 つの検証ルールを追加し、「パスワード」に 2 つの検証ルールを追加します。 の必須このルールは、ユーザーが入力フィールドに入力する必要があり、フィールドが空の場合はフォームを送信できないことを指定します。

の最大長ルールは、入力値のアルファベットの最大数を設定します。 以外にも、必須そして最大長メソッドに加えて、次のような他の検証ルールを追加できます。分、最大、最小の長さ、パターン、 そして検証。

の分ルールは入力フィールドの最小値を指定し、最大ルールはその最大値を指定します。

使用できます分そして最大次のような数値タイプの入力を含むルール:

上の入力フィールドの値は 18 以上、35 以下である必要があります。

の最小の長さルールは次のようなものです最大長さルールは変わりますが、代わりにアルファベットの最小数を設定します。

この例では、minLength ルールにより、入力値の長さが少なくとも 10 文字である必要があることが指定されています。

のパターンルールは、入力値が一致する必要がある正規表現パターンを指定します。 の検証ルールを使用すると、入力値を検証するカスタム検証関数を定義できます。 関数は次のいずれかを返す必要があります真実または文字列エラーメッセージ。

例えば：

この例では、「firstname」入力はパターンルール。 のパターン入力値にはアルファベット文字 (大文字と小文字) のみが含まれる必要があります。

「テスト」入力では、検証ルールを使用して、値が 12 以下かどうかをチェックするカスタム検証関数を定義します。

React Hook Form ライブラリは、フォーム内の JavaScript エラーを処理するための組み込みメカニズムを提供します。 のハンドル送信この関数は、ユーザーがフォームを送信したときに呼び出され、検証が成功した場合にフォーム データで解決される Promise を返します。

ただし、検証エラーが発生した場合、Promise は検証エラーを含むエラー オブジェクトで拒否されます。

以下は、ハンドル送信関数：

このコード ブロックでは、フォーム状態オブジェクトは各フィールドのエラーにアクセスできるようになります。 のエラーオブジェクトには、各入力フィールドの検証エラーが保存されます。 のエラーオブジェクトは、無効なフィールドごとに条件付きでエラー メッセージを表示します。

のためにファーストネーム入力フィールド、必須ルールが満たされていない場合は、入力フィールドの横に「姓を入力してください」というエラー メッセージが表示されます。 の値が年入力フィールドが許容範囲外の場合、エラー メッセージが表示されます。

値が 18 未満の場合は、「このサイトには若すぎます」というエラー メッセージが表示され、値が 35 より大きい場合は、「このサイトには古すぎます」というエラー メッセージが表示されます。

React でフォームを構築するプロセスは複雑で時間がかかる場合があります。 それでも、React Hook Form は、フォーム データと検証を管理するための使いやすく柔軟なライブラリを提供することで、このタスクを簡素化します。

useForm フック、register メソッド、および handleSubmit メソッドを使用すると、React でのフォームの構築がより効率的かつ合理化されたプロセスになります。 機能的なフォームを作成すると、React アプリケーションのユーザー エクスペリエンスと全体的な品質が向上します。

Nobleokafor は、プログラミング分野で 3 年以上の経験を持つ熟練したソフトウェア エンジニアです。 彼は、最適化された JavaScript、ネイティブおよびクロスプラットフォームのモバイルおよび Web ソフトウェア ソリューションを構築することに情熱を持っています。 彼は 1 年以上の執筆経験を持つ技術記事を通じて、自身の知識と教訓を文書化するよう努めています。 これらの記事の主な焦点と目的は、ソフトウェア エンジニアリングのトピックに関する複雑さを単純化することです。