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屬性？ 這應該允許您從任何您想要的來源傳遞值。