从按钮 onClick 更新 Formik 的状态答案

【问题标题】：Update Formik's state from a button onClick从按钮 onClick 更新 Formik 的状态
【发布时间】：2021-06-14 09:55:22
【问题描述】：

我有一个 Formik 表单，当我点击一个按钮时，我想更新表单的状态。

function updateForm(){
  //Update a product in the form's state

}

<Button onClick={updateForm}>Update Product</>

<Formik
    initialValues={{ products: {} }}
>
   {({values}) = (
   )}
</Formik>

我尝试更新initialValues，但这会重置表单状态的任何当前更改。

我可以将表单的状态复制到本地 setState 并将其循环回 initialValues 但这感觉有点矫枉过正，因为 Formik 已经这样做了。

我认为useFormik 可能有效，但文档没有详细说明这可能如何工作...？

【问题讨论】：

你是对的。你可以在这里使用useFormik 钩子。您的初始值将传递给useFormik，它会返回一个类似{setValues, values, errors, ...} 的对象，然后您可以在updateForm 函数中使用setValues。
我可以将useFormik 与Formik Form 元素一起使用，而不是像Formik 文档建议的那样使用通用HTML <form> 元素吗？感觉文档缺少一些更广泛的示例。
啊抱歉，我没有意识到您也在使用 Formik 的表单组件。如果您想继续使用 Form，而不是 useFormik，您可以使用 useFormikContext 和 Formik，它会为您提供与 useFormik 相同的值。检查文档上的示例：formik.org/docs/api/useFormikContext
是的，正确。 useFormikContext 将仅在 Formik 内。所以不幸的是，你必须使用useFormik，而在使用useFormik时你不能使用Form and Field。
是的，它行不通。您必须在 Formik 中呈现的组件内调用 useFormikContext。如果您检查文档考试，则 AutoSubmitToken 会在 Formik 内呈现，并且它正在使用 useFormikContext

标签： reactjs formik

【解决方案1】：

鉴于来自 @aditaya81070 的有用 cmets，我最终找到了这个解决方案...

我还必须稍微重构一下我的解决方案，因为我在页面上有两个表单，为了使用setFieldValue，我必须将两个Forms 都嵌套在<Formik> 元素中，这样它们就可以轻松通信（他们仍然可以单独拥有自己的状态）。但是不要将它们嵌套在自己内部，因为这是不允许的。所以这很好：

<Formik>
  <Form />
  <Form />
</Formik>

但这不是……

<Formik>
  <Form>
    <Form />
  </Form>
</Formik>

然后我只需将setFieldValue 传递到按钮的回调中...简单:)

function updateForm(setFieldValue){
  //Update a product in the form's state
  setFieldValue('product.price'), 1.50);
}

<Formik
    initialValues={{ products: {} }}
>
   {({values, setFieldValue, validateForm}) = (
      <button onClick={() => 
                 //This is the import bit, to get the context.
                 updateForm(setFieldValue)
      }>
         Update Product
      <button/>
   )}
</Formik>

【讨论】：

不错的一个。我完全忘记了上下文的这种渲染道具模式。