陣列和巢狀物件

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 也原生支援陣列和物件陣列。使用類似 Lodash 的括號語法作為 name 字串，您可以快速為列表中的項目建立欄位。

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 );

這個頁面有幫助嗎？

在 GitHub 上編輯此頁面

陣列和巢狀物件

巢狀物件

陣列

避免巢狀

在此頁面上

資源

社群

關於 Formium

訂閱我們的電子報