数组和嵌套对象

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

订阅我们的新闻