React + Formik - 如何传入新值并将表单设置为脏？

Question

我的 React 应用程序中有一个 Formik 表单，我有一个特定的场景，我似乎找不到解决方法：

我在自定义表单组件之外有一个切换，它基本上“将表单中的所有内容设置为 false”。 我当前的解决方案是当它被切换时，我更新我传递给表单组件的道具，并重新渲染：

在我的表单组件中：

const [initialState, setInitialState] = useState(props.initialState);

useEffect(() => {
  setInitialState(props.initialState);
}, [props.initialState]);

...
...

<Formik
  enableReinitialize
  initialState={initialState}
  ...
/>

这确实使用新值正确更新了我的表单，但它不会将表单设置为dirty 。 我的表单组件中有基于它是否脏的逻辑，在这种情况下，我希望表单被认为是脏的。 我首先尝试设置要touched的每个字段或将每个字段包含在initialTouched中。 然而， dirty值是通过比较当前值与initialState来计算的，而不是字段是否被触及，所以我的表单在这里被认为是“原始的”，因为它与我的（新）初始 state 完全相同。

我正在寻找的是：

• 一种将这些新值作为initialState以外的东西传递的方法（即以某种方式强制设置来自外部<Formik />的值），这会导致dirty被计算为真
• 一种强制我的表单变脏的方法（它是一个只读属性，但如果有另一种方法可以模仿它并强制它为真）

Answer 1

       onSubmit={(values, { setSubmitting, resetForm }) => {
          setSubmitting(true);
          setTimeout(async () => {
            console.log(values);

            // it will set formik.isDirty to false
            // it will also keep new values
            resetForm({ values });  

          }, 100);
        }}

Answer 2

您是否尝试过使用onReset属性？ 这应该允许您从任何您想要的来源传递值。