はじめに
今までなんとなく使用していたので、英語のドキュメントを読んで仕事に応用するまでの記録してみます。
Formikとは
Formikとは、Reactでよく使われているツールで、フォームで使う機能を簡単かつ簡潔に実装できるようにしてくれるライブラリーです。要は、フォーム管理ツールです。
ドキュメントは👇
読んでいきます。
学びや気づき
Formik を理解する上で大事な要素を学びます。
<Field />（Fieldコンポーネント）
<Field /> は name属性を使用して自動的に Formik に入力を伝えます。デフォルトは HTML の <input /> 要素になります。
なぜ <Field /> を使うのか？
どの要素にも必ず必要なhandleChangeをすべての要素でpropsとして渡すのは、無駄ですよね？
そんなとき、FormikのFieldコンポーネントを使うと、handleChangeやerrorをpropsとして送る必要がなくなります。
便利なやつです。
name 属性
Fieldの一意の識別子です。
id や name を使って識別する。
例えば、formik.values.email でアクセスできます。
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
value={formik.values.email}
/>
<Form />（Formコンポーネント）
<Form />（Formコンポーネント）はHTML の
Formik の handleSubmit と handleReset に自動的にフックします。他のすべてのプロップは DOM ノードに直接渡されます。
<FieldArray />（FieldArray コンポーネント）
一般的な配列/リストの操作を支援するコンポーネントです。
これに、関連する配列を保持する値の中のキーへのパスを持つ name プロパティを渡します。
実際の使われ方
const InnerForm = (form) => {
return ( < Component/> )
}
const RequestForm = withFormik({
mapPropsToValues: ({ props }) => ({ initialValues}),
validationSchema: Yup.object().shape({バリデーションの設定}),
mapPropsToStatus: () => ({ triedSubmit: false }),
validateOnMount: true,
handleSubmit: (values, { props: { handleSubmit }, ...actions }) => {
handleSubmit(values, actions)
},
})(InnerForm)
DevToolで見るとわかるが、InnerFormコンポーネントがFormikにラップされています。
withFormik とは
withFormik()で作る方法とFormikコンポーネントを直接使う方法があるみたい。
withFormik のOptionに
- mapPropsToValues
- validationSchema
- mapPropsToStatus
- validateOnMount
- handleSubmit
など、があります。
mapPropsToValues とは
このオプションが指定された場合、Formik は状態変化を更新可能なフォームに転送し、これらの値を props.values として新しいコンポーネントで利用できるようにします。
withFormik()でinitialValuesを設定する際に使われます。
詳しい具体例は、以下の記事をみて欲しいです。
Warning: A component is changing an uncontrolled input of type email to be controlled.
警告。コンポーネントが、制御されていないemail型の入力を制御対象に変更しています。
というエラーが出るための対策として、mapPropsToValuesを使っています。
validationSchema とは
Formikが持つYup用の特別な設定オプション
mapPropsToStatus とは
更新可能なフォームの状態に転送し、これらの値を props.status として新しいコンポーネントで利用できるようにします。任意の状態をフォームに保存したり、インスタンス化したりするのに便利です。
validateOnMount とは
このオプションを使用して、コンポーネントがマウント（レンダリングされることをマウントという）またはinitialValues変更されたときに検証を実行するようにFormikに指示します。
デフォルトはfalseです。
handleSubmit とは
サブミットの処理をするやつです。データ送信のハンドラです。
formik.errors
custom validation function を介して入力されます。
キースストロークごとに、全てのエラーオブジェクトに格納される。
touched
Formik はどのフィールドがタッチされたかを追跡することができる。
この情報は touched と呼ばれるオブジェクトに保存されます。
各キーは boolean true/false のみです。
touched を利用するために、formik.handleBlur を各入力の onBlur プロップに渡すことができます。この関数はformik.handleChangeと似たように動作します。
どのフィールドを更新するかを決定するためにname属性を使用します。
handleChange
1ページにおける全ての form要素（例えば<input>, <select>, <textarea>）に対して、handleChangeは、一括で再利用される。
values
フォームが持つ要素の現在の値
<ErrorMessage />
バリデーション（検証）に関して
Formikにおいて、バリデーション（検証）は使い手（開発者）、つまりあなたに任されています。
カスタム検証関数validate関数の代わりに、
yup
検証には、Yupというライブラリがよく用いられています。
FormikにはvalidationSchemaと呼ばれるYupのための特別な設定オプションがあります。
validationSchema
Formikが持つYup用の特別な設定オプション