React Formik教程系列之六：表单数据的保存和装载

在使用React进行开发的时候，如果是简单的表单还好。如果遇到复杂的表单，比如分好几个步骤的表单，联动效果的字段，多层结构的字段等等，就需要一个好的框架的支持了。下面介绍一下如何在Formik中保存表单数据并在需要时装载。

React Formik组件

装载表单数据

添加状态

JavaScript

const [formData, setFormData] = useState(null);

添加loadData按钮

JavaScript

<button onClick={() => setFormData(loadData())}>Load data</button>

上面的loadData可以从local storage装载数据，或者调用API返回数据。

更新Formik组件属性

JavaScript

<Formik initialValues = { formData || initialValues }
  enableReinitialize
  onSubmit={ onSubmit }>

重置表单数据

最基本的方法就是使用HTML中的reset按钮：

JavaScript

<button type='reset'>Reset</button>

另外，在表单提交后，也需要重置所有字段值：

JavaScript

const onSubmit = (values, onSubmitProps) => {
  onSubmitProps.resetForm();
};