是否可以跟踪字段中的数据是否已更改Formik

Question

Formik是否具有onChange类型的通用事件，例如onSubmit，以便检查字段是否已更改，因为检查字段中的数据更改本身不适合我，我需要一个通用解决方案。

<Formik
initialValues={{
name: '',
phone: '',
email: '',
}}
validationSchema={validationSchema}
onChange={({values}) => {
...
}}
>

当字段中的数据发生变化时，我想执行一些操作，例如，我想做这样一个操作，将60秒的设置超时添加到条件"；onChange；如果用户停止，我将向服务器提交表单，问题是因为我需要一个事件，而不是用于表单验证，而是用于更改其中一个字段，并且我不想在每个字段中插入该处理程序用于输入"；onChange；事件，因为我有30多个不同类型的字段，我想跟踪更改条件setFieldValue-Formik。

Answer 1

我找到了一个相当优雅的解决方案来解决我的问题，这正是我所需要的，我必须更仔细地搜索，所以我看到了这篇解决我问题的精彩文章。

解决方案如下：创建一个观察器组件，并将其插入hoc Formik中的任何位置，并且在该组件中应使用useFormikContext并传递已经必要的数据。

观察员组件：

import React, { useEffect } from 'react'
import { useFormikContext } from 'formik'
const FormikValueObserver = ({ onChange }) => {
const { values, initialValues } = useFormikContext()
useEffect(() => onChange({values, initialValues}), [values, initialValues, onChange])
return null
}
export default FormikValueObserver

使用：

<Formik initialValues={initialValues} onSubmit={onSubmit}>
{({..., handleSubmit}) => (
<form onSubmit={handleSubmit}>
<FormikValueObserver onChange={(values, initialValues) => {
console.log("This will work on changing any value in the field", values)
}} />
...
</form>
)}
</Formik>