中レベル: React でのフォームの管理

フォームは、Web アプリケーションでユーザー入力を収集するために不可欠です。 React でのフォームの管理は、特に検証、複数ステップのプロセス、ファイルのアップロードを処理する場合に複雑になる可能性があります。このガイドでは、状態によるフォームの管理、ref の使用、検証の実装、複雑なフォームの処理について詳しく説明します。

管理対象コンポーネント

制御されたコンポーネントは、フォームデータがコンポーネントの状態によって処理されるコンポーネントです。このアプローチにより、React がフォーム入力を完全に制御し、フォームの動作が予測可能かつ管理可能になります。

状態を含むフォームデータの処理

制御されたコンポーネントを作成するには、フォーム データの状態を設定し、ユーザー入力に基づいて状態を更新します。

例:

リーリー

この例では、useState がフォーム データを管理し、ユーザーが入力フィールドに入力するたびに handleChange 関数が状態を更新します。

制御されていないコンポーネント

非制御コンポーネントは DOM に依存してフォーム データを処理します。 DOM 要素からフォーム データに直接アクセスするには、refs を使用します。

Ref を使用してフォーム データにアクセスする

制御されていないコンポーネントを作成するには、useRef フックを使用してフォーム要素の参照を作成します。

例:

リーリー

この例では、フォームの送信時に、nameRef 参照と emailRef 参照を使用して、DOM 要素から入力値に直接アクセスします。

フォームの検証

フォームの検証は、ユーザー入力が送信前に必要な基準を満たしていることを確認するために不可欠です。

基本的な検証手法

フォームの送信ハンドラーで入力値をチェックすることで、基本的な検証を追加できます。

例:

リーリー

この例では、validate 関数は名前と電子メールのフィールドが空かどうかを確認し、それに応じてエラー メッセージを設定します。

フォーム検証用のサードパーティ ライブラリ

Formik や Yup などのサードパーティ ライブラリを使用すると、フォームの検証を簡素化できます。

Formik と Yup の例:

リーリー

この例では、Formik と Yup を使用してフォームの状態と検証を処理します。 Formik はフォームを管理するための柔軟かつ簡単な方法を提供し、Yup は検証スキーマの定義に役立ちます。

複雑なフォーム管理

複数ステップのフォームの管理

複数ステップのフォームの管理には、フォームの状態の処理とステップ間のナビゲーションが含まれます。

例:

リーリー

この例では、フォームの状態が複数のステップにわたって管理されます。 nextStep 関数と prevStep 関数は、ステップ間のナビゲーションを処理します。

フォームでのファイルのアップロードの処理

ファイルのアップロードの処理には、ファイル入力要素の使用と、アップロードされたファイルをコンポーネント状態で管理することが含まれます。

例

:

リーリー

この例では、handleFileChange 関数は選択されたファイルの状態を更新し、handleSubmit 関数はフォームの送信を処理します。

結論

React でのフォーム管理には、制御コンポーネントと制御されていないコンポーネントの理解、フォーム検証の実装、複雑なフォームの処理が含まれます。これらの概念をマスターすると、React アプリケーションで堅牢でユーザーフレンドリーなフォームを作成できます。中級レベルの開発者として、これらの分野で強固な基盤を獲得すると、より洗練された信頼性の高いフォームを開発する能力が向上し、React エコシステムでより効果的かつ効率的な開発者になれます。

以上が中レベル: React でのフォームの管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。