インターン レベル: React でのフォームの管理

フォームは、Web アプリケーションでユーザー入力を収集するために不可欠です。制御コンポーネントと非制御コンポーネント、フォーム検証、複雑なフォームの処理の基本を理解していれば、React でのフォーム管理は簡単になります。このガイドは、React でフォームの管理を始めるのに役立ちます。

管理対象コンポーネント

制御されたコンポーネントは、フォームデータがコンポーネントの状態によって処理されるコンポーネントです。これは、入力値が React によって制御されることを意味します

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

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

例:

リーリー

この例では、フォーム入力は名前と電子メールの状態変数によって制御されます。 onChange イベント ハンドラーは、ユーザーが入力フィールドに入力するたびに状態を更新します。

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

非制御コンポーネントは、フォーム データが 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 サイトの他の関連記事を参照してください。