コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > アーキテクト レベル: React でのフォームの管理

アーキテクト レベル: React でのフォームの管理

WBOY
リリース： 2024-07-19 12:29:28
オリジナル
947 人が閲覧しました

Architect level: Managing Forms in React

React でのフォームの管理は、洗練されたユーザーフレンドリーなアプリケーションを構築する上で重要な側面です。アーキテクト レベルの開発者としては、フォームの拡張性、保守性、パフォーマンスを確保するためのベスト プラクティスとパターンを理解するだけでなく、設計することが不可欠です。この記事では、制御されたコンポーネントと制御されていないコンポーネント、フォーム検証、複雑なフォーム管理テクニックについて説明し、React でフォームをアーキテクチャ レベルで処理するための包括的なガイドを提供します。

管理対象コンポーネント

制御コンポーネントは、フォーム データがコンポーネントの状態によって管理される React コンポーネントです。このメソッドはフォーム入力を完全に制御できるため、フォームの動作がより予測可能になり、デバッグが容易になります。

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

制御されたコンポーネントは、入力が変更されるたびに状態を更新します。このアプローチにより、状態が常に現在の入力値を反映するようになります。

例:

import React, { useState } from 'react';

const ControlledForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${formData.name}, Email: ${formData.email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;
ログイン後にコピー

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

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

制御されていないコンポーネントは、DOM に依存してフォーム データを管理します。 refs を使用すると、DOM 要素からフォーム データに直接アクセスできます。このアプローチは、即時 DOM アクセスが必要な場合に役立ちます。

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

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

例:

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${nameRef.current.value}, Email: ${emailRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" ref={emailRef} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;
ログイン後にコピー

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

フォームの検証

フォームの検証は、ユーザー入力が送信前に必要な基準を満たしていることを確認するために非常に重要です。堅牢な検証を実装すると、ユーザー エクスペリエンスが向上し、無効なデータの処理が防止されます。

基本的な検証手法

基本的な検証には、フォームの送信ハンドラーの入力値のチェックと、適切なエラー メッセージの表示が含まれます。

例:

import React, { useState } from 'react';

const BasicValidationForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const validate = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = 'Name is required';
    if (!formData.email) newErrors.email = 'Email is required';
    return newErrors;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const newErrors = validate();
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
    } else {
      alert(`Name: ${formData.name}, Email: ${formData.email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default BasicValidationForm;
ログイン後にコピー

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

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

Formik や Yup などのサードパーティ ライブラリを使用すると、フォームの検証が簡素化され、保守しやすくなります。

Formik と Yup の例:

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

const FormikForm = () => (
  <div>
    <h1>Signup Form</h1>
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {() => (
        <Form>
          <label>
            Name:
            <Field name="name" />
            <ErrorMessage name="name" component="div" />
          </label>
          <br />
          <label>
            Email:
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" />
          </label>
          <br />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

export default FormikForm;
ログイン後にコピー

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

複雑なフォーム管理

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

マルチステップ フォームには、複数のステップにわたる状態とナビゲーションの管理が含まれており、多くの場合、フォーム入力プロセスがより簡単でユーザー フレンドリーになります。

例:

import React, { useState } from 'react';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    address: '',
  });

  const nextStep = () => setStep(step + 1);
  const prevStep = () => setStep(step - 1);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(JSON.stringify(formData, null, 2));
  };

  switch (step) {
    case 1:
      return (
        <form>
          <h2>Step 1</h2>
          <label>
            Name:
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 2:
      return (
        <form>
          <h2>Step 2</h2>
          <label>
            Email:
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 3:
      return (
        <form onSubmit={handleSubmit}>
          <h2>Step 3</h2>
          <label>
            Address:
            <input
              type="text"
              name="address"
              value={formData.address}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="submit">Submit</button>
        </form>
      );
    default:
      return null;
  }
};



export default MultiStepForm;
ログイン後にコピー

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

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

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

例:

import React, { useState } from 'react';

const FileUploadForm = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (file) {
      alert(`File name: ${file.name}`);
    } else {
      alert('No file selected');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Upload file:
        <input type="file" onChange={handleFileChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FileUploadForm;
ログイン後にコピー

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

結論

React でのフォーム管理には、制御されたコンポーネントと制御されていないコンポーネントの理解と実装、フォーム検証の実行、複数ステップのフォームやファイルのアップロードなどの複雑なフォームの処理が含まれます。これらの概念をマスターすると、React アプリケーションで堅牢で保守しやすく、使いやすいフォームを作成できます。アーキテクト レベルの開発者として、フォーム管理のベスト プラクティスを設計して実行する能力があれば、チームの生産性とアプリケーションの全体的な品質が大幅に向上し、開発プロセス全体を通じて高い基準が維持されるようになります。

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

ソース：dev.to
前の記事：Next.js サーバー アクションは安全ですか? 次の記事：Cypress を使用した React アプリケーションのテスト: 包括的なガイド
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2270
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2404
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2018
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1904
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1973
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート