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

Question

我像这样使用带有前向引用的 formik 形式

表单.js

import 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.js

import 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&nbsp; enableReinitialize&nbsp; initialValues={initialValues}&nbsp; onSubmit={onFormSubmit}&nbsp; formRef={formRef}>&nbsp; <FieldWrapper>&nbsp; &nbsp; <MoneyBox name="input" currencySymbol={"£"} />&nbsp; </FieldWrapper></Form>在您Form.js将道具传递给Formik组件时const Form = ({&nbsp; formRef,&nbsp; children,&nbsp; initialValues,&nbsp; validationSchema,&nbsp; onSubmit,&nbsp; enableReinitialize}) => {&nbsp; return (&nbsp; &nbsp; <FormikWithRef&nbsp; &nbsp; &nbsp; enableReinitialize={enableReinitialize}&nbsp; &nbsp; &nbsp; validateOnChange={true}&nbsp; &nbsp; &nbsp; validateOnBlur={true}&nbsp; &nbsp; &nbsp; initialValues={initialValues}&nbsp; &nbsp; &nbsp; validationSchema={validationSchema}&nbsp; &nbsp; &nbsp; onSubmit={onSubmit}&nbsp; &nbsp; &nbsp; ref={formRef}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {(props) => <form onSubmit={props.handleSubmit}>{children}</form>}&nbsp; &nbsp; </FormikWithRef>&nbsp; );};我不太确定您的业务逻辑应该如何工作，但这是一个包含上述更改的工作示例。

Answer 2

（解决方案 CodeSandbox）它被称为initialValues，那么为什么您希望它在您更改它时更新表单值呢？（但是你可以通过使用 prop 来要求它这样做enableReinitialize，正如@Vencovsky 在另一个答案中提到的那样。）要将您想要的值（value.input在easy-peasy商店中）绑定到 formik 输入，您可以使用：const [field, meta, helpers] = useField(props);useEffect(() => {&nbsp; helpers.setValue(value.input)}, [value])每次value店内更改时，它都会更新 formik 输入字段的值。并且要更改存储状态的值，您可以使用设置选项卡的方式。（使用easy-peasy商店。）在 CodeSandbox 上运行在 中的第 49 行Tabs.js，它会在单击选项卡时更新值。在 中的第 19 行Input.js，它将输入值绑定到您的存储状态。