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

この記事では、FormikとのReactフォームの構(gòu)築を?qū)g証し、狀態(tài)、検証、および提出を処理する能力を紹介します?；镜膜蔙eactコンポーネントから始めて、Formikを統(tǒng)合します。

制御された反応フォームの構(gòu)築

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

単純な制御されていない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>

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

関數(shù)htmlform（）{
  const [email、setemail] = race.usestate（ ""）;
  const [password、setPassword] = race.usestate（ ""）;

  戻る （
    

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

なぜformikを選ぶのですか？

Reactには多數(shù)のフォーム管理ライブラリが存在します（例、React Hook Form、Reduxフォーム）。 Formikは次のことを區(qū)別します。

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

Formikをフォームコンポーネントに統(tǒng)合しましょう。

Formikの実裝

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

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

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

方法1：FormikフックuseFormik

現(xiàn)在のフォームは機(jī)能していません。 useFormikフックは、Formik関數(shù)と変數(shù)を提供します。返された値を記録すると、その內(nèi)容が明らかになります。

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

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

  戻る （
    

Formikを結(jié)合して要素を形成します：

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

  戻る （
    

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

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

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

関數(shù)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は狀態(tài)と提出を処理します。フォーム構(gòu)造に焦點(diǎn)を當(dāng)てます。

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

Formikは、フォームレベル（ validateまたはvalidationSchemaを使用）、フィールドレベル、または手動(dòng)トリガーで検証を提供します。フォームレベルの検証は、フォーム全體を一度に検証します。 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"）。必須（ "必須"）、
    // ...その他の検証
  }）、
  // ...
}）;

フィールドレベルと手動(dòng)検証も可能です。

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

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

実用的な例

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

エラーメッセージの表示

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

<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]}`}）;
}

結(jié)論

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

以上がF(xiàn)ormikを使用してReactのフォームを処理しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。