Formikを使用してReactのフォームを処理します

Webフォームは、Webサイトやアプリケーションに不可欠です。ネイティブHTMLフォームは基本的な機能を提供しますが、状態を管理する、検証、および提出を複雑にすることができます。コンポーネント駆動型のアプローチで反応すると、フォームの処理が簡素化されますが、それでも冗長コードにつながる可能性があります。軽量ライブラリであるFormikは、これらの課題にエレガントに対処し、州の管理、検証、および提出を簡素化します。

この記事では、FormikとのReactフォームの構築を実証し、状態、検証、および提出を処理する能力を紹介します。基本的なReactコンポーネントから始めて、Formikを統合します。

制御された反応フォームの構築

Reactコンポーネントは、状態と小道具に依存しています。 HTMLフォーム要素のvalue属性を通じて内部状態を維持します。これにより、それらは制御されていないコンポーネントになります - DOMは状態を管理します。ただし、Reactが状態を管理する制御されたコンポーネントは、より良い制御と単一の真実源を提供します。

単純な制御されていないHTMLフォームは次のようになるかもしれません：

<div class="formRow">
  <label for="email">電子メールアドレス</label>
  <input type="email" id="email">
</div>
<div class="formRow">
  <label for="password">パスワード</label>
  <input type="password" id="password">
</div>
<button type="submit">提出する</button>

これを制御された反応成分に変換します。

関数htmlform（）{
  const [email、setemail] = race.usestate（ ""）;
  const [password、setPassword] = race.usestate（ ""）;

  戻る （
    

電子メールアドレス setemail（e.target.value）} />

パスワード setPassWord（E.Target.Value）} />

提出する

）; }

このアプローチは、フォーム値に対して単一の真実のソースを提供し、より簡単な検証とパフォーマンスの最適化を可能にします。

なぜformikを選ぶのですか？

Reactには多数のフォーム管理ライブラリが存在します（例、React Hook Form、Reduxフォーム）。 Formikは次のことを区別します。

1. 宣言的アプローチ：抽象化により、状態、検証、および提出が簡素化されます。
2. エスケープハッチ：抽象化にもかかわらず、必要に応じてコントロールを提供します。
3. 共同開催状態：コンポーネント内にフォーム関連のロジックを保持します。
4. 適応性： formikを必要に応じて使用することができます。
5. 使いやすさ：シンプルで効果的です。

Formikをフォームコンポーネントに統合しましょう。

Formikの実装

基本的なログインフォームを作成し、3つのFormik使用方法を調査します。

1. useFormikフック
2. Reactコンテキストを持つFormik（<formik></formik> ））
3. withFormik高次コンポーネント

デモには、FormikとYupパッケージが必要です。

方法1：FormikフックuseFormik

現在のフォームは機能していません。 useFormikフックは、Formik関数と変数を提供します。返された値を記録すると、その内容が明らかになります。

useFormik 、 initialValuesとonSubmitハンドラーを備えた使用を使用します。

 //反応コンポーネント
関数baseformik（）{
  const formik = useformik（{
    initialValues：{email： ""、password： ""}、
    onSubmit（values）{
      //提出ロジックをフォーム
    }
  }）;

  戻る （
    

{/ *フォーム要素 */}

）; }

Formikを結合して要素を形成します：

 //反応コンポーネント
関数baseformik（）{
  const formik = useformik（{
    initialValues：{email： ""、password： ""}、
    onSubmit（values）{
      //提出ロジックをフォーム
    }
  }）;

  戻る （
    

電子メールアドレス

{/ * ...他のフォーム要素 */}

）; }

これにより、送信（ onSubmit={formik.handleSubmit} ）と入力状態（ value 、 formik.getFieldPropsを介してonChange ）を処理します。手動の状態管理とイベントの取り扱いは避けています。 getFieldPropsとhandleSubmitを破壊すると、コードの明確さがさらに向上します。

<formik></formik>コンポーネントは、ような内蔵コンポーネントを使用して、さらに抽象化します<field></field>、<form></form> 、 そして<errormessage></errormessage>。これらのコンポーネントは、レンダリングプロップパターンを利用します。

 'formik'から{formik、field、form}をimport;

関数formikrenderprops（）{
  const initialValues = {email： ""、password： ""};

  const onsubmit =（values）=> {
    alert（json.stringify（values、null、2））;
  };

  戻る （
    <formik initialvalues="{initialValues}" onsubmit="{onSubmit}">
      {（）=>（
        <form>
          <field classname="email formField" name="email" type="email"></field>
          {/ * ...他のフォーム要素 */}
        </form>
      ）}
    </formik>
  ）;
}

Formikは状態と提出を処理します。フォーム構造に焦点を当てます。

Formikを使用したフォーム検証

Formikは、フォームレベル（ validateまたはvalidationSchemaを使用）、フィールドレベル、または手動トリガーで検証を提供します。フォームレベルの検証は、フォーム全体を一度に検証します。 validateカスタム検証用ですが、 validationSchemaはYUPのようなライブラリを使用します。

validateを使用した例：

 const formik = useformik（{
  // ...
  検証：（）=> {
    const errors = {};
    if（！formik.values.email）{errors.email = "必須"; }
    // ...その他の検証
    戻りエラー。
  }、
  // ...
}）;

YUPを使用したvalidationSchemaを使用した例：

 const formik = useformik（{
  // ...
  validationschema：yup.object（）。shape（{
    電子メール：Yup.String（）。電子メール（ "Invalid Email"）。必須（ "必須"）、
    // ...その他の検証
  }）、
  // ...
}）;

フィールドレベルと手動検証も可能です。

方法3： withFormik高次コンポーネント

withFormikは、フォームコンポーネントをラップする高次コンポーネントです。

実用的な例

エラーメッセージの表示とユーザー名の生成を示しましょう。

エラーメッセージの表示

Formikはエラー表示を簡素化します。 errorsオブジェクトを確認し、メッセージを表示します。

<label htmlfor="email">
  電子メールアドレス
  {formik.touched.email && formik.errors.email}
</label>

または使用します<errormessage></errormessage>：

<errormessage name="email"></errormessage>

ユーザー名の生成

FormikのsetValuesを使用して、電子メールからユーザー名を生成できます。

 onSubmit（values）{
  formik.setValues（{... values、username： `@$ {values.email.split（"@"）[0]}`}）;
}

結論

Formikは、Reactフォームの取り扱いを大幅に簡素化します。この記事では、基本について説明しています。高度な機能とユースケースについては、Formikのドキュメントを調べてください。

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