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

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

王林
リリース： 2024-07-18 07:28:19
オリジナル
813 人が閲覧しました

Mid level: Managing Forms in React

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

管理対象コンポーネント

制御されたコンポーネントは、フォーム データがコンポーネントの状態によって処理されるコンポーネントです。このアプローチにより、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));
      }}
    >
      {({ 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) => {
    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 エコシステムでより効果的かつ効率的な開発者になれます。

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

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