React Formik教程系列之四：通过FieldArray组件实现动态表单

在使用React进行开发的时候，如果是简单的表单还好。如果遇到复杂的表单，比如分好几个步骤的表单，联动效果的字段，多层结构的字段等等，就需要一个好的框架的支持了。下面介绍一下如何在Formik中通过FieldArray组件实现动态表单。

React Formik组件

所谓动态表单，就是在表单中可以动态增加/删除某个字段，当然，这个字段可以是单一的HTML字段，也可以是自定义的组合字段。

FieldArray的使用

声明FieldArray

JavaScript

import { Formik, Field, FieldArray } from "formik";

定义相应字段的初始值

JavaScript

const initialValues = {
  authors: [''],
};

使用JSX

这里需要从render props中解构出push, remove方法，以及form属性(其中包含了表单字段对应的values)。

JavaScript

<FieldArray
          type="text"
          id="authors"
          name="authors">
            {
              (props) => {
                const { push, remove, form } = props;
                const { values } = form;
                const { authors } = values;
                return (
                  <div>
                    {
                      authors.map((author, index) => (
                        <div key={index}>
                          <Field name={`authors[${index}]`}/>
                          <button type='button' onClick={() => push('')}>Add</button>
                          {
                            authors.length > 1 && (
                              <button type='button' onClick={() => remove(index)}>Remove</button>
                            )
                          }
                        </div>
                      ))
                    }
                  </div>
                )
              }
            }
        </FieldArray>

通过FastField提升复杂表单的性能

根据官网文档，如果表单字段数过多，应考虑使用FastField来提升性能。它和普通字段的最大区别在于：

• 普通Field: 一旦表单中任何字段值发生变化，所有字段都会被重新渲染。
• FastField: 只有FastField自己的值变化时，它才会被重新渲染。和它无关的字段值变化时，它不会被渲染。但要注意，如果字段间有关联的话，不能使用FastField。

JavaScript

<Field
  type="text"
  id="age"
  name="age"
/>