<Formik> は、フォームの構築を支援するコンポーネントです。React MotionやReact Routerなどのライブラリで普及したレンダープロップスパターンを使用します。

例

1 import React from 'react';
2 import { Formik } from 'formik';
3 
4 const BasicExample = () => (
5   <div>
6     <h1>My Form</h1>
7     <Formik
8       initialValues={{ name: 'jared' }}
9       onSubmit={(values, actions) => {
10         setTimeout(() => {
11           alert(JSON.stringify(values, null, 2));
12           actions.setSubmitting(false);
13         }, 1000);
14       }}
15     >
16       {props => (
17         <form onSubmit={props.handleSubmit}>
18           <input
19             type="text"
20             onChange={props.handleChange}
21             onBlur={props.handleBlur}
22             value={props.values.name}
23             name="name"
24           />
25           {props.errors.name && <div id="feedback">{props.errors.name}</div>}
26           <button type="submit">Submit</button>
27         </form>
28       )}
29     </Formik>
30   </div>
31 );

プロパティ

リファレンス

プロパティ

Formikのレンダーメソッドとプロパティ

<Formik />を使用してレンダリングするには、2つの方法があります。

• <Formik component>
• <Formik children>
• <Formik render> 2.xで非推奨

各レンダーメソッドには同じプロパティが渡されます

dirty: boolean

値が初期値と完全に等しくない場合は true、それ以外の場合は false を返します。dirty は読み取り専用の計算されたプロパティであり、直接変更しないでください。

errors: { [field: string]: string }

フォームの検証エラー。initialValuesで定義されたフォームのvaluesの形状と一致する必要があります。validationSchema（使用することをお勧めします）を使用している場合、キーと形状はスキーマと正確に一致します。内部的には、Formikは生のYup検証エラーを変換します。validateを使用している場合、その関数はerrorsオブジェクトの形状を決定します。

handleBlur: (e: any) => void

onBlurイベントハンドラー。入力がtouchedかどうかを追跡する必要がある場合に役立ちます。これは<input onBlur={handleBlur} ... />に渡す必要があります。

handleChange: (e: React.ChangeEvent<any>) => void

一般的な入力変更イベントハンドラー。これにより、values[key]が更新されます。ここで、keyはイベントを発生させた入力のname属性です。name属性が存在しない場合、handleChangeは入力のid属性を探します。注：「入力」はここですべてのHTML入力を意味します。

handleReset: () => void

リセットハンドラー。フォームを初期状態にリセットします。これは<button onClick={handleReset}>...</button>に渡す必要があります。

handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void

送信ハンドラー。これは<form onSubmit={props.handleSubmit}>...</form>に渡す必要があります。送信プロセスの詳細については、フォーム送信を参照してください。

isSubmitting: boolean

フォームの送信状態。送信が進行中の場合はtrue、それ以外の場合はfalseを返します。重要：Formikは、送信が試行されるとすぐにこれをtrueに設定します。送信プロセスの詳細については、フォーム送信を参照してください。

isValid: boolean

errorsがない場合（つまり、errorsオブジェクトが空の場合）はtrue、それ以外の場合はfalseを返します。

注：isInitialValidは2.xで非推奨になりました。ただし、下位互換性のために、isInitialValidプロパティが指定されている場合、errorsがない場合、またはフォームが「pristine」（つまり、dirtyではない）状態の場合はisInitialValidの結果がtrueを返します。

isValidating: boolean

送信中、または呼び出し中にFormikが検証を実行している場合はtrueを返します。[validateForm]それ以外の場合は直接false。送信プロセス中にisValidatingで何が起こるかについて詳しくは、フォーム送信を参照してください。

resetForm: (nextState?: Partial<FormikState<Values>>) => void

フォームを命令的にリセットします。唯一の（オプションの）引数であるnextStateは、これらのFormikStateフィールドのいずれかがオプションのオブジェクトです

1 interface FormikState<Values> {
2   /** Form values */
3   values: Values;
4   /** map of field names to specific error for that field */
5   errors: FormikErrors<Values>;
6   /** map of field names to **whether** the field has been touched */
7   touched: FormikTouched<Values>;
8   /** whether the form is currently submitting */
9   isSubmitting: boolean;
10   /** whether the form is currently validating (prior to submission) */
11   isValidating: boolean;
12   /** Top level status state, in case you need it */
13   status?: any;
14   /** Number of times user tried to submit the form */
15   submitCount: number;
16 }

nextStateが指定されている場合、FormikはnextState.valuesを新しい「初期状態」として設定し、nextStateの関連値を使用して、フォームのinitialValuesとinitialTouched、initialStatus、initialErrorsを更新します。これは、変更を加えた後にフォームの初期状態（つまり、「ベース」）を変更するのに役立ちます。

1 // typescript usage
2 function MyForm(props: MyFormProps) {
3   // using TSX Generics here to set <Values> to <Blog>
4   return (
5     <Formik<Blog>
6       initialValues={props.initVals}
7       onSubmit={(values, actions) => {
8         props.onSubmit(values).then(() => {
9           actions.setSubmitting(false);
10           actions.resetForm({
11             values: {
12               // the type of `values` inferred to be Blog
13               title: '',
14               image: '',
15               body: '',
16             },
17             // you can also set the other form states here
18           });
19         });
20       }}
21     >
22       // etc
23     </Formik>
24   );
25 }

nextStateが省略された場合、Formikは状態を元の初期状態にリセットします。後者は、componentDidUpdateまたはuseEffect内でresetFormを呼び出すのに役立ちます。

 actions.resetForm();

setErrors: (fields: { [field: string]: string }) => void

errorsを命令的に設定します。

setFieldError: (field: string, errorMsg: string) => void

フィールドのエラーメッセージを命令的に設定します。fieldは、更新したいerrorsのキーと一致する必要があります。カスタム入力エラーハンドラーを作成するのに役立ちます。

setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => Promise<void | FormikErrors>

フィールドのタッチ状態を命令的に設定します。fieldは、更新したいtouchedのキーと一致する必要があります。カスタム入力ぼかしハンドラーを作成するのに役立ちます。このメソッドを呼び出すと、validateOnBlurがtrueに設定されている場合（デフォルトで設定されています）、検証が実行されます。isTouchedは、指定しない場合はデフォルトでtrueになります。3番目の引数としてfalseを渡して、検証を明示的に防止/スキップすることもできます。

validateOnBlurがtrueに設定されていて、エラーがある場合は、返されたPromiseで解決されます。

submitForm: () => Promise

フォーム送信をトリガーします。フォームが無効な場合、プロミスは拒否されます。

submitCount: number

ユーザーがフォームを送信しようとした回数。handleSubmitが呼び出されると増加し、handleResetを呼び出した後にリセットされます。submitCountは読み取り専用の計算されたプロパティであり、直接変更しないでください。

setFieldValue: (field: string, value: React.SetStateAction<any>, shouldValidate?: boolean) => Promise<void | FormikErrors>

フィールドの値を命令的に設定します。fieldは、更新したいvaluesのキーと一致する必要があります。カスタム入力変更ハンドラーを作成するのに役立ちます。これを呼び出すと、validateOnChangeがtrue（デフォルトで設定されています）に設定されている場合、検証が実行されます。3番目の引数としてfalseを渡して、検証を明示的に防止/スキップすることもできます。

validateOnChangeがtrueに設定されていて、エラーがある場合は、返されたPromiseで解決されます。

setStatus: (status?: any) => void

最上位のstatusを、命令的に必要なものに設定します。フォームに関連する任意の最上位の状態を制御するのに役立ちます。たとえば、handleSubmitでAPI応答をコンポーネントに渡すために使用できます。

setSubmitting: (isSubmitting: boolean) => void

isSubmittingを命令的に設定します。onSubmitハンドラーでsetSubmitting(false)を呼び出してサイクルを終了します。送信プロセスの詳細については、フォーム送信を参照してください。

setTouched: (fields: { [field: string]: boolean }, shouldValidate?: boolean) => Promise<void | FormikErrors>

touchedを命令的に設定します。これを呼び出すと、validateOnBlurがtrue（デフォルトで設定されています）に設定されている場合、検証が実行されます。2番目の引数としてfalseを渡して、検証を明示的に防止/スキップすることもできます。

validateOnBlurがtrueに設定されていて、エラーがある場合は、返されたPromiseで解決されます。

setValues: (fields: React.SetStateAction<{ [field: string]: any }>, shouldValidate?: boolean) => Promise<void | FormikErrors<Values>>

valuesを命令的に設定します。これを呼び出すと、validateOnChangeがtrue（デフォルトで設定されています）に設定されている場合、検証が実行されます。2番目の引数としてfalseを渡して、検証を明示的に防止/スキップすることもできます。

validateOnChangeがtrueに設定されていて、エラーがある場合は、返されたPromiseで解決されます。

status?: any

他の方法では表現/保存できないフォームの状態を表すために使用できる最上位のステータスオブジェクト。これは、API応答をキャプチャして内部コンポーネントに渡すのに役立ちます。

statusは、setStatusを呼び出すことによってのみ変更する必要があります。

touched: { [field: string]: boolean }

タッチされたフィールド。各キーは、タッチ/アクセスされたフィールドに対応しています。

values: { [field: string]: any }

フォームの値です。mapPropsToValues（指定されている場合）の結果、またはラップされたコンポーネントに渡された関数ではないすべてのpropsの形になります。

validateForm: (values?: any) => Promise<FormikErrors<Values>>

指定された内容に応じて、validateまたはvalidateSchemaを命令的に呼び出します。検証対象の値をオプションで渡すことができ、これによりFormikの状態がそれに応じて変更されます。そうでない場合は、フォームの現在のvaluesが使用されます。

validateField: (field: string) => void

指定されたフィールドのvalidate関数を命令的に呼び出すか、Yupのschema.validateAtと提供されたトップレベルのvalidationSchema propを使用してスキーマ検証を実行します。Formikは現在のフィールド値を使用します。

component?: React.ComponentType<FormikProps<Values>>

1 <Formik component={ContactForm} />;
2 
3 const ContactForm = ({
4   handleSubmit,
5   handleChange,
6   handleBlur,
7   values,
8   errors,
9 }) => (
10   <form onSubmit={handleSubmit}>
11     <input
12       type="text"
13       onChange={handleChange}
14       onBlur={handleBlur}
15       value={values.name}
16       name="name"
17     />
18     {errors.name && <div>{errors.name}</div>}
19     <button type="submit">Submit</button>
20   </form>
21 );

警告: <Formik component> は <Formik render> よりも優先されるため、同じ <Formik> 内で両方を使用しないでください。

render: (props: FormikProps<Values>) => ReactNode

2.xで非推奨になりました。

1 <Formik render={props => <ContactForm {...props} />} />
2 
3 <Formik
4   render={({ handleSubmit, handleChange, handleBlur, values, errors }) => (
5     <form onSubmit={handleSubmit}>
6       <input
7         type="text"
8         onChange={handleChange}
9         onBlur={handleBlur}
10         value={values.name}
11         name="name"
12       />
13       {errors.name &&
14         <div>
15           {errors.name}
16         </div>}
17       <button type="submit">Submit</button>
18     </form>
19   )}
20 />

children?: React.ReactNode | (props: FormikProps<Values>) => ReactNode

1 <Formik children={props => <ContactForm {...props} />} />
2 
3 // or...
4 
5 <Formik>
6   {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
7     <form onSubmit={handleSubmit}>
8       <input
9         type="text"
10         onChange={handleChange}
11         onBlur={handleBlur}
12         value={values.name}
13         name="name"
14       />
15       {errors.name &&
16         <div>
17           {errors.name}
18         </div>}
19       <button type="submit">Submit</button>
20     </form>
21   )}
22 </Formik>

enableReinitialize?: boolean

デフォルトはfalseです。initialValuesが変更された場合に（深層的な等価性を使用して）、Formikがフォームをリセットするかどうかを制御します。

isInitialValid?: boolean

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

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

initialErrors?: FormikErrors<Values>

フォームの初期フィールドエラー。Formikはこれらの値をrenderメソッドコンポーネントでerrorsとして利用できるようにします。

注意: initialErrorsは高階コンポーネントwithFormikでは利用できません。代わりにmapPropsToErrorsを使用してください。

initialStatus?: any

フォームの初期statusの任意の値。フォームがリセットされた場合、この値が復元されます。

注意: initialStatusは高階コンポーネントwithFormikでは利用できません。代わりにmapPropsToStatusを使用してください。

initialTouched?: FormikTouched<Values>

フォームの初期訪問済みフィールド。Formikはこれらの値をrenderメソッドコンポーネントでtouchedとして利用できるようにします。

注意: initialTouchedは高階コンポーネントwithFormikでは利用できません。代わりにmapPropsToTouchedを使用してください。

initialValues: Values

フォームの初期フィールド値。Formikはこれらの値をrenderメソッドコンポーネントでvaluesとして利用できるようにします。

フォームがデフォルトで空の場合でも、すべてのフィールドを初期値で初期化する必要があります。そうしないと、Reactは入力を非制御から制御に変更したというエラーをスローします。

注意: initialValuesは高階コンポーネントでは利用できません。代わりにmapPropsToValuesを使用してください。

onReset?: (values: Values, formikBag: FormikBag) => void

オプションのフォームリセットハンドラー。フォームのvaluesと「FormikBag」が渡されます。

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

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

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

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

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

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

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

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

1 // Synchronous validation
2 const validate = values => {
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 => {
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です。このオプションを使用して、changeイベントとchange関連のメソッドでFormikに検証を実行するように指示します。より具体的には、handleChange、setFieldValue、またはsetValuesのいずれかが呼び出された場合です。

validateOnMount?: boolean

デフォルトはfalseです。このオプションを使用して、<Formik />コンポーネントがマウントされたとき、および/またはinitialValuesが変更されたときにFormikに検証を実行するように指示します。

validationSchema?: Schema | (() => Schema)

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