id: arrays title: Arrays 和嵌套 Objects

custom_edit_url: https://github.com/jaredpalmer/formik/edit/master/docs/guides/arrays.md

Formik 支持嵌套对象和开箱即用的数组。这两个主题有些相关，因为它们都使用相同的语法。

嵌套对象

Formik 中的name props 可以使用类似 lodash 的点路径，来引用嵌套的 Formik 值。这意味着您不再需要压平表单的值。

  1. import React from 'react';
  2. import {Formik, Form, Field} from 'formik';
  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.       <Field name="social.facebook" />
  20.       <Field name="social.twitter" />
  21.       <button type="submit">Submit</button>
  22.     </Formik>
  23.   </div>
  24. );

数组

Formik 还支持开箱即用的数组和对象数组。使用类似 lodash 的括号语法name字符串，您可以快速为列表中的项目构建字段。

  1. import React from 'react';
  2. import {Formik, Form, Field} from 'formik';
  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.       <Field name="friends[0]" />
  17.       <Field name="friends[1]" />
  18.       <button type="submit">Submit</button>
  19.     </Formik>
  20.   </div>
  21. );

有关在列表中操作（添加/删除/ 更多）items 的更多信息，请参阅<FieldArray>组件的 API 参考部分。