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

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 に依存してフォーム データを処理します。 DOM 要素からフォーム データに直接アクセスするには、refs を使用します。

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 サイトの他の関連記事を参照してください。