FORMIKと反応する形を書く簡単な構造

導入

私はどのように使用したい共有したいFormik 私の反応コードでフォームを書くために.私は、あなたがすでに聞いて、試みると思っていますFormik その前に、私たちは大部分はここでコンポーネント構造を議論することができます.
この品は全品ではないFormik チュートリアル.Formik docs 必要なすべての情報があります.

用法フック

あなたが使うことができる異なる方法からFormik フォームを作成するにはuseFormik フックは、私がこれまでに必要とした唯一のものです.それはconfig オブジェクトを作成し、フォームを作成するために必要なすべてのツールを持つオブジェクトを返します.
あなたが追加する必要がある最小値config オブジェクトは

initialValues object -フォームを描画するときにフォームフィールド内に移動する値.これがフォームの初期状態です.

onSubmit function -ユーザーがフォームを送信するときに最終的な値を受け取ります.この関数を使用してvalues 必要な場合は、サーバーに送信する前に.

validate function -値の検証を実行し、エラーを返します.代替案があるvalidationSchema を使用してスキーマを定義するYup オブジェクトスキーマ検証ライブラリ.

const formik = useFormik({
  initialValues,
  onSubmit,
  validate,
});

const {
  values,
  errors,
  handleSubmit,
  setFieldValue,
  ...andManyOthers
} = formik;

成分構造

私はいつも良い古い2レベルを使用しますcontainer & presentational フォームの構造.

すべてを定義するコンテナコンポーネントconfig それでuseFormik(config) フック.

これを受け取るコンポーネントconfig フォームコンポーネントをプロップしてレンダリングします.

この構造は再利用可能なコンポーネントを書く一般的なスタイルです.これは、別のコンテナを作成することによってフォームのためにさらに良い作品create and edit アイテムだが同じ<Form /> フォームを表示するコンポーネント.
例えば、ユーザアカウント形態の構造はこのようになる.

<CreateUserFormContainer />

<UpdateUserFormContainer />

<UserForm />

validate 機能かvalidationSchema 別のファイルに移動し、フォームコンテナにインポートします.
両方とも必要ないとしてもcreate and edit , フォームコンテナーを書くと、物事は大きな形で明確に保つ.
両方のフォームを使用している場合、私も余分な送信isNew プロップ<UserForm /> 知っているcreate フォームまたはedit フォーム.これは、正しいエラーメッセージと他のテキストを表示するのに役立ちます.

ユーザーアカウントフォーム

ここではCodeSandbox Link サンプルユーザーアカウントのコードを参照するには、いくつかのUutilsとValidationを使用します.

最後の思考

我々が必要としたけれどもuseFormik フックのようなフォルム要素を使用してカスタムフィールドを作成する場合<Field> , <ErrorMessage> , useFormik うまくいきません.だから、必ずチェックしてくださいuseFormik docs あなたは何を使用して行方不明を参照してくださいuseFormik フック.
あなたがJSXであまりに多くの条件書を書くとわかるならば、同じものを使うために<Form /> 両方ともcreate and edit あるいは、create and edit フォーム、別のコンポーネントでそれらを分離する時間です.
あなたは、特にREDUXやMobXのような状態管理ライブラリを使用して、グローバルな状態でフォームデータを格納する必要はありません.