从按钮 onClick 更新 Formik 的 state

Question

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

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

}

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

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

我尝试更新initialValues但这将重置表单 state 中的任何当前更改。

我可以将 Form 的 state 复制到本地setState并将其循环回initialValues ，但这感觉有点过头了，因为 Formik 已经这样做了。

我认为useFormik可能会工作，但文档没有扩展这可能如何工作......？

Answer 1

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

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

<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>