指定されたオプションから派生したコンポーネントに、propsとフォームハンドラ（「FormikBag」）を渡す高階Reactコンポーネントクラスを作成します。

例

1 import React from 'react';
2 import { withFormik } from 'formik';
3 
4 const MyForm = props => {
5   const {
6     values,
7     touched,
8     errors,
9     handleChange,
10     handleBlur,
11     handleSubmit,
12   } = props;
13   return (
14     <form onSubmit={handleSubmit}>
15       <input
16         type="text"
17         onChange={handleChange}
18         onBlur={handleBlur}
19         value={values.name}
20         name="name"
21       />
22       {errors.name && touched.name && <div id="feedback">{errors.name}</div>}
23       <button type="submit">Submit</button>
24     </form>
25   );
26 };
27 
28 const MyEnhancedForm = withFormik({
29   mapPropsToValues: () => ({ name: '' }),
30 
31   // Custom sync validation
32   validate: values => {
33     const errors = {};
34 
35     if (!values.name) {
36       errors.name = 'Required';
37     }
38 
39     return errors;
40   },
41 
42   handleSubmit: (values, { setSubmitting }) => {
43     setTimeout(() => {
44       alert(JSON.stringify(values, null, 2));
45       setSubmitting(false);
46     }, 1000);
47   },
48 
49   displayName: 'BasicForm',
50 })(MyForm);

options

リファレンス

options

displayName?: string

内部フォームコンポーネントがステートレス関数コンポーネントの場合、displayNameオプションを使用してコンポーネントに適切な名前を付けることができます。これにより、React DevToolsでコンポーネントを簡単に見つけることができます。指定した場合、ラップされたフォームはFormik(displayName)として表示されます。省略した場合、Formik(Component)として表示されます。このオプションは、クラスコンポーネント（例：class XXXXX extends React.Component {..}）には必要ありません。

enableReinitialize?: boolean

デフォルトはfalseです。ラップされたコンポーネントのpropsが変更された場合（深い等価性を使用して）、Formikがフォームをリセットするかどうかを制御します。

handleSubmit: (values: Values, formikBag: FormikBag) => void | Promise<any>

フォーム送信ハンドラです。フォームのvaluesと「FormikBag」が渡されます。「FormikBag」には、注入されたpropsとメソッドのサブセット（つまり、set<Thing>で始まる名前のすべてのメソッド + resetForm）と、ラップされたコンポーネントに渡されたpropsを含むオブジェクトが含まれています。

「FormikBag」

• props (ラップされたコンポーネントに渡されたprops)
• resetForm
• setErrors
• setFieldError
• setFieldTouched
• setFieldValue
• setStatus
• setSubmitting
• setTouched
• setValues

注：errors、touched、status、およびすべてのイベントハンドラはFormikBagには含まれていません。

重要：onSubmitが非同期の場合、Formikは解決されると自動的にisSubmittingをfalseに設定します。つまり、formikBag.setSubmitting(false)を手動で呼び出す必要はありません。ただし、onSubmit関が同期的である場合は、自分でsetSubmitting(false)を呼び出す必要があります。

isInitialValid?: boolean | (props: Props) => boolean

2.xで非推奨。代わりにmapPropsToErrorsを使用してください

マウント前にisValid propの初期値を制御します。関数 übergeben もできます。マウント時に送信ボタンとリセットボタンを有効/無効にしたい場合に便利です。

mapPropsToErrors?: (props: Props) => FormikErrors<Values>

このオプションが指定されている場合、Formikはその結果を更新可能なフォーム状態に転送し、これらの値を新しいコンポーネントでprops.errorsとして初期に使用できるようにします。任意のエラー状態をフォームにインスタンス化する場合に便利です。props.errorsは、検証が実行されるとすぐに上書きされることに注意してください。 フォームがリセットされると、Formikはprops.errorsをこの初期値にリセットし、この関数を再実行します。

mapPropsToStatus?: (props: Props) => any

このオプションが指定されている場合、Formikはその結果を更新可能なフォーム状態に転送し、これらの値を新しいコンポーネントでprops.statusとして使用できるようにします。任意の状態をフォームに保存またはインスタンス化する場合に便利です。フォームがリセットされると、statusはこの初期値にリセットされ、この関数が再実行されることに注意してください。

mapPropsToTouched?: (props: Props) => FormikTouched<Values>

このオプションが指定されている場合、Formikはその結果を更新可能なフォーム状態に転送し、これらの値を新しいコンポーネントでprops.touchedとして使用できるようにします。任意のtouched状態（つまり、フィールドにアクセス済みとしてマーク）をフォームにインスタンス化する場合に便利です。 フォームがリセットされると、Formikはこの初期値を使用し、この関数を再実行することに注意してください。

mapPropsToValues?: (props: Props) => Values

このオプションが指定されている場合、Formikはその結果を更新可能なフォーム状態に転送し、これらの値を新しいコンポーネントでprops.valuesとして使用できるようにします。mapPropsToValuesが指定されていない場合、Formikは関数ではないすべてのpropsを内部コンポーネントのprops.valuesにマップします。つまり、省略した場合、Formikはtypeof props[k] !== 'function'（ここで、kはキー）であるpropsのみを渡します。

フォームが親からpropsを受け取っていない場合でも、mapPropsToValuesを使用してフォームの空の状態を初期化します.

validate?: (values: Values, props: Props) => FormikErrors<Values> | Promise<any>

注：バリデーションにはvalidationSchemaとYupを使用することをお勧めします。ただし、validateは、フォームを検証するための依存関係のない簡単な方法です。

関数を使用してフォームのvaluesを検証します。この関数は次のいずれかになります。

1. 同期してerrorsオブジェクトを返します。

1 // Synchronous validation
2 const validate = (values, props) => {
3   const errors = {};
4 
5   if (!values.email) {
6     errors.email = 'Required';
7   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
8     errors.email = 'Invalid email address';
9   }
10 
11   //...
12 
13   return errors;
14 };

• 非同期で、errorsを含むオブジェクトを解決するPromiseを返します。

1 // Async Validation
2 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
3 
4 const validate = (values, props) => {
5   return sleep(2000).then(() => {
6     const errors = {};
7     if (['admin', 'null', 'god'].includes(values.username)) {
8       errors.username = 'Nice try';
9     }
10     // ...
11     return errors;
12   });
13 };

validateOnBlur?: boolean

デフォルトはtrueです。このオプションを使用して、blurイベントで検証を実行します。具体的には、handleBlur、setFieldTouched、またはsetTouchedが呼び出されたときです。

validateOnChange?: boolean

デフォルトはtrueです。このオプションを使用して、Formikにchangeイベントとchange関連のメソッドで検証を実行するように指示します。具体的には、handleChange、setFieldValue、またはsetValuesが呼び出されたときです。

`validateOnMount?: boolean`

デフォルトは`false`です。 このオプションを使用して、ラップされたコンポーネントがマウントされたとき、または`initialValues`が変更されたときに、Formikに検証を実行するように指示します（優先度は低）。

`validationSchema?: Schema | ((props: Props) => Schema)`

YupスキーマまたはYupスキーマを返す関数。これは検証に使用されます。エラーはキーによって内部コンポーネントの`errors`にマップされます。そのキーは`values`のキーと一致する必要があります。

注入されたpropsとメソッド

これらは`<Formik render={props => ...} />`のpropsと同じです。