配列とネストされたオブジェクト

Formikは、ネストされたオブジェクトと配列を標準でサポートしています。これらはどちらも同じ構文を利用するため、ある程度関連しています。

ネストされたオブジェクト

Formikの`name`プロップスは、lodashライクなドットパスを使用してネストされたFormik値を参照できます。つまり、フォームの値をフラット化する必要がなくなります。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 
4 export const NestedExample = () => (
5   <div>
6     <h1>Social Profiles</h1>
7     <Formik
8       initialValues={{
9         social: {
10           facebook: '',
11           twitter: '',
12         },
13       }}
14       onSubmit={values => {
15         // same shape as initial values
16         console.log(values);
17       }}
18     >
19       <Form>
20         <Field name="social.facebook" />
21         <Field name="social.twitter" />
22         <button type="submit">Submit</button>
23       </Form>
24     </Formik>
25   </div>
26 );

配列

Formikは、配列とオブジェクトの配列も標準でサポートしています。`name`文字列にlodashライクなブラケット構文を使用することで、リスト内のアイテムのフィールドをすばやく作成できます。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 
4 export const BasicArrayExample = () => (
5   <div>
6     <h1>Friends</h1>
7     <Formik
8       initialValues={{
9         friends: ['jared', 'ian'],
10       }}
11       onSubmit={values => {
12         // same shape as initial values
13         console.log(values);
14       }}
15     >
16       <Form>
17         <Field name="friends[0]" />
18         <Field name="friends[1]" />
19         <button type="submit">Submit</button>
20       </Form>
21     </Formik>
22   </div>
23 );

リスト内のアイテムの操作（追加/削除など）の詳細については、`<FieldArray>`コンポーネントに関するAPIリファレンスセクションを参照してください。

ネストを避ける

このデフォルトの動作を回避したい場合は、Formikはドットを含むフィールドもサポートしています。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 
4 export const NestedExample = () => (
5   <div>
6     <h1>Social Profiles</h1>
7     <Formik
8       initialValues={{
9         'owner.fullname': '',
10       }}
11       onSubmit={values => {
12         // same shape as initial values
13         console.log(values);
14       }}
15     >
16       <Form>
17         <Field name="['owner.fullname']" />
18         <button type="submit">Submit</button>
19       </Form>
20     </Formik>
21   </div>
22 );

前へバリデーション次へTypeScript

このページは役に立ちましたか？

GitHubでこのページを編集する

配列とネストされたオブジェクト

ネストされたオブジェクト

配列

ネストを避ける

このページについて

リソース

コミュニティ

Formiumについて

ニュースレターの購読