在 Formik Form 上更新 initialValues 道具不会更新输入值

Question

我像这样使用带有前向引用的 formik 形式表单.jsimport React from "react";import FormikWithRef from "./FormikWithRef";const Form = ({  formRef,  children,  initialValues,  validationSchema,  onSubmit}) => {  return (    <FormikWithRef      validateOnChange={true}      validateOnBlur={true}      initialValues={initialValues}      validationSchema={validationSchema}      onSubmit={onSubmit}      ref={formRef}    >      {(props) => <form onSubmit={props.handleSubmit}>{children}</form>}    </FormikWithRef>  );};export default Form;FormikWithRef.jsimport React, { forwardRef, useImperativeHandle } from "react";import { Formik } from "formik";function FormikWithRef(props, ref) {  let _formikProps = {};  useImperativeHandle(ref, () => _formikProps);  return (    <Formik {...props}>      {(formikProps) => {        _formikProps = formikProps;        if (typeof props.children === "function") {          return props.children(formikProps);        }        return props.children;      }}    </Formik>  );}export default forwardRef(FormikWithRef);我有一些选项卡更新easy-peasy商店状态，当我选择第二个选项卡时，我想用 Formik 表单type更新输入值（最初来自商店状态），但更新特定于该组件的状态作为prop 传递给组件。valueinitialValuesinitialValuesFormik

Answer 1

如果您希望输入的值在更改时更改initialValues，则需要将Formikprop enableReinitializeas传递给组件true。

因此，您需要在代码中更改的是将 propTabsForm.js传递给您的组件FormenableReinitialize

<Form

  enableReinitialize

  initialValues={initialValues}

  onSubmit={onFormSubmit}

  formRef={formRef}

>

  <FieldWrapper>

    <MoneyBox name="input" currencySymbol={"£"} />

  </FieldWrapper>

</Form>

在您Form.js将道具传递给Formik组件时

const Form = ({

  formRef,

  children,

  initialValues,

  validationSchema,

  onSubmit,

  enableReinitialize

}) => {

  return (

    <FormikWithRef

      enableReinitialize={enableReinitialize}

      validateOnChange={true}

      validateOnBlur={true}

      initialValues={initialValues}

      validationSchema={validationSchema}

      onSubmit={onSubmit}

      ref={formRef}

    >

      {(props) => <form onSubmit={props.handleSubmit}>{children}</form>}

    </FormikWithRef>

  );

};

我不太确定您的业务逻辑应该如何工作，但这是一个包含上述更改的工作示例。

Answer 2

（解决方案 CodeSandbox）

它被称为initialValues，那么为什么您希望它在您更改它时更新表单值呢？（但是你可以通过使用 prop 来要求它这样做enableReinitialize，正如@Vencovsky 在另一个答案中提到的那样。）

要将您想要的值（value.input在easy-peasy商店中）绑定到 formik 输入，您可以使用：

const [field, meta, helpers] = useField(props);

useEffect(() => {

  helpers.setValue(value.input)

}, [value])

每次value店内更改时，它都会更新 formik 输入字段的值。

并且要更改存储状态的值，您可以使用设置选项卡的方式。（使用easy-peasy商店。）

在 CodeSandbox 上运行

在 中的第 49 行Tabs.js，它会在单击选项卡时更新值。

在 中的第 19 行Input.js，它将输入值绑定到您的存储状态。