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

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

管理対象コンポーネント

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

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

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

例:

import React, { useState } from 'react';

const ControlledForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

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

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

export default ControlledForm;

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

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

非制御コンポーネントは、フォーム データが 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 [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (!name) newErrors.name = 'Name is required';
    if (!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: ${name}, Email: ${email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {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));
      }}
    >
      {({ errors, touched }) => (
        <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) => {
    setFormData({ ...formData, [e.target.name]: e.target.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 開発者として学習し成長し続ける中での成功につながります。

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