Formikの詳しい使い方

反応フォーム

1 はじめに

フォームは、最新の Web アプリケーションでは避けられない入力メカニズムですが、それらを処理するプロセスは非常に複雑になる可能性があります。Formik は、フォームの処理プロセスを簡素化することを目的とした React フォームライブラリです。この記事では、Formik の主な機能と使用法、およびそれを使用して React フォームの処理を簡素化する方法を紹介します。

1.1 フォルミックの紹介

Formik は、React 専用に構築されたオープンソースのフォームライブラリです。フォームの状態管理、フォームの検証、およびフォームの送信を処理するための使いやすい API を提供します。Formik は、React のすべてのフォーム要素とイベントをサポートし、React エコシステムの他のライブラリとうまく統合します。同時に、Formik はいくつかの高度な機能も提供します。たとえば、非同期検証のサポート、フィールドレベルの検証、フォームの状態の変化に応じた計算されたプロパティの自動計算などです。

1.2 この記事の目的

この記事の目的は、フォームの状態を管理する方法、フォームの検証を実行する方法、フォームの送信を処理する方法など、Formik を使用して React でフォームを処理する方法を紹介することです。この記事では、Formik の高度な機能とベストプラクティス、および React エコシステム内の他のライブラリと統合する方法についても紹介します。この記事を通じて、読者は Formik を使用して React でフォームをより適切に管理する方法を理解できるようになります。

2 Formikの基礎知識紹介

2.1 フォーム処理

フォーム処理は、Web アプリケーション開発の重要な部分です。Formik は、React アプリケーション用のフォーム処理ライブラリであり、開発者が複雑なフォームを簡単に処理し、フォームの保守性と再利用性を向上させるのに役立ちます。

2.2 Formikの利点

従来のフォーム処理方法と比較して、Formik には次の利点があります。

状態管理: Formik はフォームの状態管理を自動的に処理するため、多くの状態管理ロジックを手動で記述する必要がなくなります。
フォーム検証: Formik は、フォーム検証ロジックをすばやく実装できる使いやすいフォーム検証ツールを提供します。
フォーム送信: Formik は、非同期フォーム送信や再試行メカニズムなど、フォーム送信を簡単に処理できます。
複雑なフォームのサポート: Formik は、複数レベルのネスト、動的フォーム、配列フォームなど、複数の複雑なフォームの処理をサポートしています。

3 Formikのインストールと設定

このセクションでは、Formik のインストールとセットアップの方法を紹介し、Formik の基本的な使用方法を示す簡単なフォームを作成します。さらに、Formik の高度な機能についても説明します。

3.1 Formik のインストール

Formik を使用するには、最初にインストールする必要があります。npm または yarn を使用して Formik をインストールできます。ターミナルでプロジェクトディレクトリに移動し、次のコマンドを実行します。

npm install formik

また

yarn add formik

これにより、Formik パッケージの最新バージョンがインストールされます。

3.2 フォームを作成する

次に、Formik の使用方法を示す簡単なフォームを作成します。フォームには、テキストボックスと送信ボタンの 2 つのフィールドがあります。ユーザーがテキストボックスにテキストを入力して送信ボタンをクリックすると、入力された値がコンソールに出力されます。

フォームを作成するには、React コンポーネントに Formik と関連コンポーネントをインポートする必要があります。次に、フォーム要素を Formik コンポーネントでラップする必要があります。Formik コンポーネントには、handleSubmitフォームが送信されたときに呼び出されるという名前の関数があります。フォームデータの印刷など、この関数でいくつかの操作を実行できます。
サンプルコードは次のとおりです。

import React from 'react';
import {
    
     Formik, Form, Field } from 'formik';

const BasicForm = () => (
  <Formik
    initialValues={
    
    {
    
     text: '' }}
    onSubmit={
    
    (values) => {
    
    
      console.log(values.text);
    }}
  >
    {
    
    ({
     
      handleSubmit }) => (
      <Form onSubmit={
    
    handleSubmit}>
        <Field name="text" />
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

export default BasicForm;

上記のコードでは、Formik コンポーネントを使用し、やなどのいくつかのパラメーターを渡しましinitialValuesたonSubmit。initialValuesフォームの初期値を表しますonSubmitがフォームが送信されたときに呼び出されるコールバック関数です。

Field コンポーネントを使用してテキストフィールドを作成し、次に button 要素を使用して送信ボタンを作成しました。ユーザーが送信ボタンをクリックすると、テキストボックスに値が出力されます。

3.3 Formik の高度な機能の使用

Formik には、フォームの検証やネストされたフィールドなど、多くの高度な機能があります。これらの機能の使用方法を示すサンプルコードを次に示します。

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

// 定义内部嵌套表单的初始值
const initialValues = {
    
    
  name: '',
  email: '',
  phone: '',
  address: {
    
    
    street: '',
    city: '',
    state: '',
    zip: ''
  }
};

// 使用Yup定义表单验证规则
const validationSchema = Yup.object({
    
    
  name: Yup.string().required('姓名不能为空'),
  email: Yup.string().email('无效的电子邮件地址').required('电子邮件地址不能为空'),
  phone: Yup.string().matches(/^\d{10}$/, '无效的电话号码').required('电话号码不能为空'),
  address: Yup.object({
    
    
    street: Yup.string().required('街道不能为空'),
    city: Yup.string().required('城市不能为空'),
    state: Yup.string().required('州不能为空'),
    zip: Yup.string().matches(/^\d{5}$/, '无效的邮政编码').required('邮政编码不能为空')
  })
});

// 渲染表单组件
const SignupForm = () => (
  <Formik
    initialValues={
    
    initialValues}
    validationSchema={
    
    validationSchema}
    onSubmit={
    
    (values, {
     
      setSubmitting }) => {
    
    
      setTimeout(() => {
    
    
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
  >
    {
    
    ({
     
      isSubmitting }) => (
      <Form>
        <div>
          <label htmlFor="name">姓名</label>
          <Field type="text" name="name" />
          <ErrorMessage name="name" />
        </div>

        <div>
          <label htmlFor="email">电子邮件</label>
          <Field type="email" name="email" />
          <ErrorMessage name="email" />
        </div>

        <div>
          <label htmlFor="phone">电话号码</label>
          <Field type="tel" name="phone" />
          <ErrorMessage name="phone" />
        </div>

        <div>
          <h3>地址</h3>

          <div>
            <label htmlFor="address.street">街道</label>
            <Field type="text" name="address.street" />
            <ErrorMessage name="address.street" />
          </div>

          <div>
            <label htmlFor="address.city">城市</label>
            <Field type="text" name="address.city" />
            <ErrorMessage name="address.city" />
          </div>

          <div>
            <label htmlFor="address.state">州</label>
            <Field type="text" name="address.state" />
            <ErrorMessage name="address.state" />
          </div>

          <div>
            <label htmlFor="address.zip">邮政编码</label>
            <Field type="text" name="address.zip" />
            <ErrorMessage name="address.zip" />
          </div>
        </div>

        <button type="submit" disabled={
    
    isSubmitting}>
          提交
        </button>
      </Form>
    )}
  </Formik>
);

export default SignupForm;

このサンプルコードは、Yup を使用してフォーム検証ルールを定義し、Formik を使用してフォームのネストされたフィールドを処理する方法を示しています。

Formikの4つのコア機能

Formik は、値の管理、フォームの送信、フォームのリセット、検証とエラーの処理など、フォーム処理のコア機能セットを提供します。このセクションでは、これらの機能について詳しく説明します。

4.1 価値管理

Formik は、フォーム内の値を簡単に管理する方法を提供します。values 属性を介して、フォーム内のすべての入力ボックスの値にアクセスできます。この属性の値はオブジェクトであり、各属性は入力ボックスの値に対応しています。例えば：

import {
    
     Formik } from 'formik';

function MyForm() {
    
    
  return (
    <Formik
      initialValues={
    
    {
    
     firstName: '', lastName: '', email: '' }}
      onSubmit={
    
    (values) => {
    
    
        console.log(values);
      }}
    >
      {
    
    ({
     
      values, handleChange }) => (
        <form>
          <input name="firstName" value={
    
    values.firstName} onChange={
    
    handleChange} />
          <input name="lastName" value={
    
    values.lastName} onChange={
    
    handleChange} />
          <input name="email" value={
    
    values.email} onChange={
    
    handleChange} />
        </form>
      )}
    </Formik>
  );
}

この例では、3 つの入力フィールドを持つフォームを定義します。initialValuesプロパティは、これらの入力ボックスの初期値を定義します。onSubmitコールバック関数では、フォーム内のすべての入力ボックスの値にアクセスできます。フォームの render 関数ではvalues、handleChange属性と属性を介してこれらの値にアクセスして管理できます。

4.2 フォームの送信

Formik は、フォーム送信を処理する簡単な方法を提供します。onSubmit属性を使用して、フォームが送信されたときに呼び出されるコールバック関数を定義できます。例えば：

import {
    
     Formik } from 'formik';

function MyForm() {
    
    
  return (
    <Formik
      initialValues={
    
    {
    
     firstName: '', lastName: '', email: '' }}
      onSubmit={
    
    (values, {
     
      setSubmitting }) => {
    
    
        setTimeout(() => {
    
    
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {
    
    ({
     
      values, handleChange, handleSubmit, isSubmitting }) => (
        <form onSubmit={
    
    handleSubmit}>
          <input name="firstName" value={
    
    values.firstName} onChange={
    
    handleChange} />
          <input name="lastName" value={
    
    values.lastName} onChange={
    
    handleChange} />
          <input name="email" value={
    
    values.email} onChange={
    
    handleChange} />
          <button type="submit" disabled={
    
    isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  );
}

この例では、3 つの入力フィールドと送信ボタンを持つフォームを定義します。onSubmit属性を通じて、フォームが送信されたときに呼び出されるコールバック関数を定義します。コールバック関数では、フォーム内のすべての入力ボックスの値にアクセスして送信操作を実行できます。setSubmitting 関数を使用して、フォームの送信ステータスを設定できます。

フォームの render 関数では、handleSubmit属性フォームの送信を処理します。また、isSubmitting属性を使用して、フォームの送信が完了するまで送信ボタンを無効にします。

4.3 フォームのリセット

Formik のフォームリセット機能は非常に便利で、ユーザーは再入力時にフォームを簡単にリセットできます。フォームをリセットすると、フォームは初期状態に戻り、すべてのフィールドの値がクリアされます。

この機能を実現するために、ResetForm 関数を Formik の形式で使用できます。この関数は、フォームを初期値にリセットし、エラーメッセージと送信ステータスをクリアします。ボタンまたはリンクに resetForm 関数を渡して、ユーザーがボタンまたはリンクをクリックしたときにフォームのリセットをトリガーすることができます。

以下は、React コンポーネントで Formik の resetForm 関数を使用してフォームをリセットする方法を示すサンプルコードです。

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

const SignupForm = () => {
    
    
  return (
    <Formik
      initialValues={
    
    {
    
    
        firstName: '',
        lastName: '',
        email: '',
      }}
      validationSchema={
    
    Yup.object().shape({
    
    
        firstName: Yup.string()
          .max(15, 'Must be 15 characters or less')
          .required('Required'),
        lastName: Yup.string()
          .max(20, 'Must be 20 characters or less')
          .required('Required'),
        email: Yup.string()
          .email('Invalid email address')
          .required('Required'),
      })}
      onSubmit={
    
    (values, {
     
      setSubmitting }) => {
    
    
        setTimeout(() => {
    
    
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {
    
    ({
     
      isSubmitting, resetForm }) => (
        <Form>
          <label htmlFor="firstName">First Name</label>
          <Field type="text" name="firstName" />
          <ErrorMessage name="firstName" />

          <label htmlFor="lastName">Last Name</label>
          <Field type="text" name="lastName" />
          <ErrorMessage name="lastName" />

          <label htmlFor="email">Email Address</label>
          <Field type="email" name="email" />
          <ErrorMessage name="email" />

          <button type="submit" disabled={
    
    isSubmitting}>
            Submit
          </button>
          <button type="button" onClick={
    
    resetForm}>
            Reset
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SignupForm;

上記のコードでは、andライブラリSignupFormを使用してフォームの検証と処理を実装するコンポーネントを定義しています。フォームには、firstName、lastName、および email の 3 つのフィールドがあります。また、フォームの送信をトリガーするボタンと、フォームをリセットするボタンも定義します。ユーザーがリセットボタンをクリックすると、関数が呼び出され、フォームが初期値にリセットされます。FormikYupresetForm

このようにして、Formik フォームのリセット機能を簡単に実装でき、ユーザーがフォームを再入力するのがより便利になります。

4.4 動的フォーム

動的フォームとは、ユーザー入力やその他の条件に基づいて、フォーム内のフィールドが動的に変化できることを意味します。この場合、フォームフィールドを動的に追加または削除し、ユーザー入力に基づいて検証する必要があります。

Formik は、FieldArray動的フォームを実装するためのコンポーネントを提供します。属性を介して配列型のフォームフィールドを指定し、render 属性を介して各要素をレンダリングする方法を指定できますFieldArray。nameたとえば、次のコードは、電子メールアドレスを動的に追加または削除するフォームを実装します。

import {
    
     Formik, Form, FieldArray, ErrorMessage } from 'formik';

function DynamicForm() {
    
    
  return (
    <Formik
      initialValues={
    
    {
    
     emails: [''] }}
      onSubmit={
    
    (values, actions) => {
    
    
        alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
      }}
    >
      {
    
    ({
     
      values }) => (
        <Form>
          <FieldArray name="emails">
            {
    
    ({
     
      remove, push }) => (
              <div>
                {
    
    values.emails.map((email, index) => (
                  <div key={
    
    index}>
                    <input
                      type="email"
                      name={
    
    `emails.${
      
      index}`}
                      value={
    
    email}
                      onChange={
    
    (event) => {
    
    
                        const newEmails = [...values.emails];
                        newEmails[index] = event.target.value;
                        push(newEmails);
                      }}
                    />
                    <button type="button" onClick={
    
    () => remove(index)}>
                      删除
                    </button>
                  </div>
                ))}
                <button type="button" onClick={
    
    () => push('')}>
                  添加电子邮件地址
                </button>
              </div>
            )}
          </FieldArray>
          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
}

上記のコードでは、FieldArrayコンポーネントを使用して動的フォームを処理しています。FieldArrayコンポーネントの属性はname、フォームフィールドの配列を指定しemails、render属性を介して各要素をレンダリングする方法を指定します。各要素のレンダリングでは、フォームの値をコントロールのイベントハンドラーにバインドして、ユーザーが入力すると Formik がフォームの値と検証ステータスを自動的に更新するようにします。

4.5 ネストされたフォーム

Formik はネストされたフォームをサポートしており、フォーム内で別のフォームを使用できます。このアプローチは、複雑なフォームデータの編成と処理に適しています。

Formik でネストされたフォームを使用するには、配列フィールドを非常に便利に処理できる FieldArray コンポーネントを使用する必要があります。FieldArray コンポーネントを使用して、複数の電子メールアドレスや電話番号など、繰り返されるフォーム要素を処理できます。

以下は、ネストされたフォームを使用して連絡先のリストを処理する方法を示す FieldArray コンポーネントを使用したサンプルコードです。

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

const ContactFormSchema = Yup.object().shape({
    
    
  contacts: Yup.array().of(
    Yup.object().shape({
    
    
      name: Yup.string().required('Name is required'),
      email: Yup.string().email('Invalid email').required('Email is required'),
      phone: Yup.string().required('Phone is required'),
    })
  ),
});

const initialValues = {
    
    
  contacts: [
    {
    
    
      name: '',
      email: '',
      phone: '',
    },
  ],
};

const ContactForm = () => {
    
    
  return (
    <Formik
      initialValues={
    
    initialValues}
      validationSchema={
    
    ContactFormSchema}
      onSubmit={
    
    (values) => console.log(values)}
    >
      {
    
    ({
     
      values }) => (
        <Form>
          <FieldArray name="contacts">
            {
    
    ({
     
      push, remove }) => (
              <div>
                {
    
    values.contacts.map((contact, index) => (
                  <div key={
    
    index}>
                    <Field name={
    
    `contacts[${
      
      index}].name`} />
                    <Field name={
    
    `contacts[${
      
      index}].email`} />
                    <Field name={
    
    `contacts[${
      
      index}].phone`} />
                    <button type="button" onClick={
    
    () => remove(index)}>
                      Remove
                    </button>
                  </div>
                ))}
                <button type="button" onClick={
    
    () => push({
    
     name: '', email: '', phone: '' })}>
                  Add Contact
                </button>
              </div>
            )}
          </FieldArray>
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};

export default ContactForm;

上記のコードでは、FieldArray コンポーネントを使用して、「contacts」という名前の配列フィールドを処理しています。render 関数では、map()メソッドを使用して配列を反復処理し、配列要素ごとにフォームを作成できます。さらに、push()メソッドを使用して新しい空白の連絡先フォームを追加し、メソッドを使用してremove()連絡先フォームを削除できます。

ネストされたフォームではネストされた名前付けを使用することに注意してください。たとえばcontacts[${index}].name、フォームデータが値オブジェクトに正しくマップされるようにします。

この例では、FieldArray コンポーネントとネストされた命名を使用して、ネストされたフォームを処理する方法を示します。このメソッドを使用すると、複雑なフォームデータを簡単に処理し、フォーム内の他のコンポーネントを使用できます。

4.6 検証とエラーの処理

実際のアプリケーションでは、フォームの検証とエラー処理が非常に重要です。Formik は非常に便利な認証メカニズムを提供し、エラーメッセージも簡単に処理します。

プロセス検証

Formik は、フォームの値を検証する関数であるvalidateプロパティ。この関数は、フォームの値が変更されると自動的に呼び出されます。

import {
    
     Formik } from 'formik';

const validate = values => {
    
    
  const errors = {
    
    };
  if (!values.email) {
    
    
    errors.email = 'Required';
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
  ) {
    
    
    errors.email = 'Invalid email address';
  }
  return errors;
};

const SignupForm = () => (
  <Formik
    initialValues={
    
    {
    
     email: '', password: '' }}
    validate={
    
    validate}
    onSubmit={
    
    (values, {
     
      setSubmitting }) => {
    
    
      setTimeout(() => {
    
    
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
  >
    {
    
    ({
    
    
      values,
      errors,
      touched,
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
      /* and other goodies */
    }) => (
      <form onSubmit={
    
    handleSubmit}>
        <input
          type="email"
          name="email"
          onChange={
    
    handleChange}
          onBlur={
    
    handleBlur}
          value={
    
    values.email}
        />
        {
    
    errors.email && touched.email && errors.email}
        <input
          type="password"
          name="password"
          onChange={
    
    handleChange}
          onBlur={
    
    handleBlur}
          value={
    
    values.password}
        />
        {
    
    errors.password && touched.password && errors.password}
        <button type="submit" disabled={
    
    isSubmitting}>
          Submit
        </button>
      </form>
    )}
  </Formik>
);

上記のコードでは、フォームの値を検証するvalidate関数。フォームの値が要件を満たしていない場合、エラーオブジェクトが返されます。Formik は、フォームの値が変更されたときにこの関数を自動的に呼び出し、返されたエラーオブジェクトに基づいてエラーメッセージを表示します。

エラー処理
フォームの送信が失敗した場合、関数setStatusとsetErrors関数を使用してエラーを処理できます。setStatusこの関数は、送信、送信成功、送信失敗など、フォーム送信のステータスを設定するために使用されます。setErrors関数は、フォームにエラーメッセージを設定するために使用されます。

import {
    
     Formik } from 'formik';

const SignupForm = () => (
  <Formik
    initialValues={
    
    {
    
     email: '', password: '' }}
    validate={
    
    (values) => {
    
    
      const errors = {
    
    };
      if (!values.email) {
    
    
        errors.email = 'Required';
      } else if (
        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
      ) {
    
    
        errors.email = 'Invalid email address';
      }
      return errors;
    }}
    onSubmit={
    
    (values, {
     
      setSubmitting, setStatus, setErrors }) => {
    
    
      axios.post('/api/signup', values)
        .then(response => {
    
    
          setSubmitting(false);
          setStatus(response.data.message);
        })
        .catch(error => {
    
    
          setSubmitting(false);
          setErrors(error.response.data.errors);
       }）
}

より複雑で高度なフォーム検証コード

import React from 'react';
import {
    
     Formik, Form, Field, ErrorMessage } from 'formik';

function SignupForm() {
    
    
  const initialValues = {
    
    
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    confirmPassword: '',
    acceptTerms: false
  };

  const validate = (values) => {
    
    
    const errors = {
    
    };

    if (!values.firstName) {
    
    
      errors.firstName = 'Required';
    }

    if (!values.lastName) {
    
    
      errors.lastName = 'Required';
    }

    if (!values.email) {
    
    
      errors.email = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
    
    
      errors.email = 'Invalid email address';
    }

    if (!values.password) {
    
    
      errors.password = 'Required';
    } else if (values.password.length < 8) {
    
    
      errors.password = 'Password must be at least 8 characters long';
    }

    if (values.password !== values.confirmPassword) {
    
    
      errors.confirmPassword = 'Passwords do not match';
    }

    if (!values.acceptTerms) {
    
    
      errors.acceptTerms = 'Required';
    }

    return errors;
  };

  const handleSubmit = (values, {
     
      setSubmitting }) => {
    
    
    setTimeout(() => {
    
    
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 400);
  };

  return (
    <Formik initialValues={
    
    initialValues} validate={
    
    validate} onSubmit={
    
    handleSubmit}>
      {
    
    ({
     
      isSubmitting }) => (
        <Form>
          <div>
            <label htmlFor="firstName">First Name</label>
            <Field type="text" name="firstName" />
            <ErrorMessage name="firstName" component="div" className="error-message" />
          </div>

          <div>
            <label htmlFor="lastName">Last Name</label>
            <Field type="text" name="lastName" />
            <ErrorMessage name="lastName" component="div" className="error-message" />
          </div>

          <div>
            <label htmlFor="email">Email</label>
            <Field type="email" name="email" />
            <ErrorMessage name="email" component="div" className="error-message" />
          </div>

          <div>
            <label htmlFor="password">Password</label>
            <Field type="password" name="password" />
            <ErrorMessage name="password" component="div" className="error-message" />
          </div>

          <div>
            <label htmlFor="confirmPassword">Confirm Password</label>
            <Field type="password" name="confirmPassword" />
            <ErrorMessage name="confirmPassword" component="div" className="error-message" />
          </div>

          <div>
            <Field type="checkbox" name="acceptTerms" />
            <label htmlFor="acceptTerms">I accept the terms and conditions</label>
            <ErrorMessage name="acceptTerms" component="div" className="error-message" />
          </div>

          <button type="submit" disabled={
    
    isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
}

export default SignupForm;

React アプリケーションでは、Formik は非常に強力なフォーム処理ライブラリであり、フォームの状態を簡単に管理し、フォームの入力を検証し、フォームの送信を処理できます。この記事では、Formik の基本、インストールとセットアップ、コア機能と高度な機能を紹介し、詳細なサンプルコードを提供します。

5 Yup を使用したフォーム検証

前のセクションでは、フォーム処理に Formik を使用する方法について説明しました。ここでは、Yup を使用してフォームを検証する方法について説明します。

5.1 うんって何？

はい、軽量の JavaScript スキーマ検証ライブラリであり、強力なスキーマを定義でき、使いやすいです。React や Formik など、あらゆる JavaScript ライブラリで使用できます。

Yup を使用すると、必須フィールド、最小/最大値、文字列形式、日付形式など、フォームフィールドが満たすべき要件を簡単に定義できます。

5.2 FormikでYupを使う

Formik で Yup を使用するのは非常に簡単です。まず、Yup をインストールする必要があります。

npm install yup

次に、Yup をインポートしてスキーマを定義する必要があります。電子メールアドレスを検証するための簡単なパターンを次に示します。

import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
    
    
  email: Yup.string().email('Invalid email').required('Required'),
});

このパターンでは、SignupSchemaという名前の文字列プロパティを持つという名前のオブジェクトを定義しますemail。Yup.string()メソッドを使用して文字列プロパティを定義し、次にメールYup.email()が整形式であることを確認するメソッド、およびYup.required()フィールドが必須であることを確認するメソッドを定義しました。

Formik でこのパターンを使用するには、それと props を渡すだけinitialValuesですvalidationSchema。

<Formik
  initialValues={
    
    {
    
     email: '' }}
  validationSchema={
    
    SignupSchema}
  onSubmit={
    
    (values, actions) => {
    
    
    // 处理提交
  }}
>
  {
    
    ({
     
      errors, touched, handleSubmit, handleChange, values }) => (
    <form onSubmit={
    
    handleSubmit}>
      <input
        type="email"
        name="email"
        value={
    
    values.email}
        onChange={
    
    handleChange}
      />
      {
    
    errors.email && touched.email && <div>{
    
    errors.email}</div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

この例では、プロパティとメソッドSignupSchemaを渡してスキーマを定義します。また、props を使用して空の文字列を設定します。フォームでは、andメソッドを使用して電子メールアドレスを検証し、必要に応じてエラーメッセージを表示します。validationSchemaYup.object().shape()initialValues emailYup.string()Yup.required()

6 複雑なフォーム要件の処理

実際の開発では、フォーム配列を含めたり、フォームフィールドを動的に追加および削除したりするなど、複雑なフォーム要件に対処する必要がある状況によく遭遇します。Formik には、これらのニーズを処理するための便利なメソッドがいくつか用意されています。

6.1 フォーム配列の使用

フォーム配列は、複数の入力ボックス、チェックボックス、またはドロップダウンリストなど、複数の同一フィールドを含むフォームを参照します。この場合、Formik はフォーム配列を簡単に処理できる Array Field コンポーネントを提供します。配列フィールドコンポーネントを使用したサンプルコードを次に示します。

import {
    
     FieldArray } from 'formik';

function MyForm() {
    
    
  return (
    <Formik
      initialValues={
    
    {
    
     users: [{
    
     name: '', email: '' }] }}
      onSubmit={
    
    (values) => {
    
    
        console.log(values);
      }}
    >
      {
    
    ({
     
      values }) => (
        <Form>
          <FieldArray name="users">
            {
    
    ({
     
      insert, remove, push }) => (
              <div>
                {
    
    values.users.map((user, index) => (
                  <div key={
    
    index}>
                    <label htmlFor={
    
    `users.${
      
      index}.name`}>Name</label>
                    <Field name={
    
    `users.${
      
      index}.name`} type="text" />
                    <label htmlFor={
    
    `users.${
      
      index}.email`}>Email</label>
                    <Field name={
    
    `users.${
      
      index}.email`} type="email" />
                    <button type="button" onClick={
    
    () => remove(index)}>
                      Remove
                    </button>
                  </div>
                ))}
                <button type="button" onClick={
    
    () => push({
    
     name: '', email: '' })}>
                  Add User
                </button>
              </div>
            )}
          </FieldArray>
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

このコード例では、FieldArrayコンポーネントを使用してusersという名前のフォーム配列を処理しています。メソッドを使用してmap配列を反復処理し、配列項目ごとに入力ボックスと削除ボタンをレンダリングできます。同時に、pushメソッドを使用して新しい配列項目を追加します。

6.2 フォームフィールドの動的な追加と削除

Formik でフォーム配列を使用すると、複雑なフォーム要件を簡単に処理できます。たとえば、ユーザーが 1 つの電話番号だけでなく、すべての電話番号を入力できるようにする必要があるとします。現時点では、フォーム配列を使用して電話番号入力ボックスを動的に追加および削除できます。

以下は、フォーム配列の使用方法を示す簡単なサンプルコードです。

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

const SignupForm = () => (
  <div>
    <h1>Signup Form</h1>
    <Formik
      initialValues={
    
    {
    
     phoneNumber: [''] }}
      validationSchema={
    
    Yup.object().shape({
    
    
        phoneNumber: Yup.array().of(Yup.string().required('Phone number is required')),
      })}
      onSubmit={
    
    values => {
    
    
        console.log(values);
      }}
      render={
    
    ({
     
      values }) => (
        <form onSubmit={
    
    handleSubmit}>
          <FieldArray name="phoneNumber">
            {
    
    ({
     
      push, remove }) => (
              <div>
                {
    
    values.phoneNumber.map((phoneNumber, index) => (
                  <div key={
    
    index}>
                    <Field name={
    
    `phoneNumber.${
      
      index}`} />
                    {
    
    index > 0 && (
                      <button type="button" onClick={
    
    () => remove(index)}>
                        Remove
                      </button>
                    )}
                  </div>
                ))}
                <button type="button" onClick={
    
    () => push('')}>
                  Add Phone Number
                </button>
              </div>
            )}
          </FieldArray>
          <button type="submit">Submit</button>
        </form>
      )}
    />
  </div>
);

export default SignupForm;

上記のコードでは、 FieldArrayコンポーネントを使用してフォームの配列を作成しました。フォーム配列では、mapメソッド配列内の各要素を反復処理し、各要素のフォームフィールドを作成できます。 pushメソッドとremoveメソッドを使用して、フォーム配列から要素を追加および削除することもできます。

コンポーネントのメソッドを使用して、フォーム配列のレンダリング方法をカスタマイズすることFieldArray もできます。render上記のコードではpush、「電話番号の追加」ボタンがクリックされたときに新しい電話番号入力ボックスを追加できるようにとremoveメソッドをのサブコンポーネントFieldArrayとして渡し、ユーザーが電話を削除できるように「削除」ボタンを追加します。数字入力ボックス。

フォーム配列を使用するだけでなく、Formik のFieldArrayコンポーネント。

使用されるサンプルコードは次のとおりですFieldArray。

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

const SignupForm = () => (
  <Formik
    initialValues={
    
    {
    
    
      name: '',
      email: '',
      phones: ['']
    }}
    validationSchema={
    
    Yup.object({
    
    
      name: Yup.string()
        .required('Required'),
      email: Yup.string()
        .email('Invalid email address')
        .required('Required'),
      phones: Yup.array()
        .of(Yup.string()
          .matches(/^\d{10}$/, 'Invalid phone number')
        )
    })}
    onSubmit={
    
    (values, {
     
      setSubmitting }) => {
    
    
      setTimeout(() => {
    
    
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
  >
    {
    
    ({
     
      values }) => (
      <Form>
        <label htmlFor="name">Name</label>
        <Field name="name" type="text" />
        <label htmlFor="email">Email</label>
        <Field name="email" type="email" />
        <FieldArray name="phones">
          {
    
    ({
     
      insert, remove, push }) => (
            <div>
              {
    
    values.phones.length > 0 &&
                values.phones.map((phone, index) => (
                  <div key={
    
    index}>
                    <Field name={
    
    `phones.${
      
      index}`} />
                    {
    
    index > 0 && (
                      <button type="button" onClick={
    
    () => remove(index)}>Remove</button>
                    )}
                  </div>
                ))}
              <button type="button" onClick={
    
    () => push('')}>Add Phone Number</button>
            </div>
          )}
        </FieldArray>
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

上記のサンプルコードでは、FieldArrayコンポーネントを使用して、フォームに電話番号の動的配列を作成しました。この配列の各要素は、文字列型の電話番号です。validationスキーマでは、Yup.array()メソッドを使用してこの配列の値を検証します。検証に失敗すると、エラーメッセージが表示されます。フォームをレンダリングするとき、 map 関数を使用して配列内の各要素のネストされたフォームを作成し、 andinsertメソッドremoveを使用して要素を追加および削除できます。

7. 結論

7.1 Formik の利点とコア機能の要約

Formik は、フォームの処理を容易にする多くの優れた機能を提供します。これらの機能の一部は次のとおりです。

値を一元管理することにより、フォーム処理の複雑さが軽減されます。
自動フォーム送信および検証メカニズムを提供します。
カスタマイズ可能なフォームエラー処理メカニズムを提供します。
カスタマイズ可能なフォーム検証メカニズムを提供し、開発者がお気に入りの検証ライブラリを使用できるようにします。

Formik のコア機能には、値の管理、フォームの送信、フォームのリセット、検証とエラーの処理が含まれます。これらの機能は、開発者がフォームを管理するのに役立ち、フォーム処理をより簡単かつ効率的にします。

7.2 次のステップ

Formik に興味がある場合は、次のことを試すことができます。

Formik の知識と使用法について詳しくは、Formik の公式ドキュメントをご覧ください。
Formik をプロジェクトに適用して、その便利さを体験してください。
複雑なフォームで作業する場合は、フォーム配列や動的フォームフィールドなど、Formik の高度な機能を使用してみてください。
Yup またはその他の検証ライブラリを Formik に統合して、フォームの検証機能を強化します。

結論として、Formik は強力なフォーム処理ライブラリであり、開発者がフォームをより簡単に処理するのに役立つ多くの便利な機能とツールを提供します。単純なフォームでも複雑なフォームでも、Formik はニーズを満たし、開発効率とコード品質を向上させることができます。

8 参考文献

この記事では、次の資料を参照しています。

フォームドキュメンテーション。
https://formik.org/docs/overview

Formik with React チュートリアル。
https://www.robinwieruch.de/react-formik

Formik を使用して React でフォームを処理する。
https://blog.logrocket.com/using-formik-to-handle-forms-in-react/

Formik – エレガントな React フォーム。
https://rangle.io/blog/formik-elegant-forms-in-react/

うんドキュメント。
https://github.com/jqueense/yup

Formik と Yup を使用した再利用可能なフォームの構築。
https://rangle.io/blog/building-a-reusable-form-with-formik-and-yup/

Formik、Yup、およびフィールド配列を使用した React での複雑なフォームの処理。https://www.digitalocean.com/community/tutorials/handling-complex-forms-in-react-using-formik-yup-and-field-arrays

これらの資料には、公式ドキュメント、チュートリアル、ブログ投稿、コミュニティ提供のコードサンプルが含まれており、Formik の広範な使用法と実践的な経験を提供します。読者は、Formik の利点、コア機能、高度な機能、ベストプラクティス、およびフォームの検証に Yup を使用して複雑なフォーム要件を処理する方法についての洞察を得ることができます。