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进行比较，而不是比较是否触摸了字段，因此这里的表单被认为是“原始”，因为它与我的（新）初始状态完全相同。 / p>

我要找的是：

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

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属性？那应该允许您从任何想要的来源传递值。

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

2 个答案: