Formik setFieldValue 在函数内部

Question

如果我有一个功能组件并想在 Formik 标签之外设置一个值，我该怎么做？下面是我有进一步澄清的代码。

 function XYZScreen() {

    const someFunctionWithLogic = () => {
        // Set the value of the number field here...
    }

    return (
        <Screen>
            <Formik>
                <FormField name="number" placeholder="Number" />
             </Formik>
        </Screen>
    );
}

我已将代码减少到尽可能少以简化问题。这个问题在问题的背景下可能没有意义，但我认为我的要求很清楚。

如果您需要更多代码，请告诉我，如果需要，我很乐意提供。

原文由 Tom el Safadi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以改用 useFormik 挂钩：

 import { useFormik } from 'Formik'

function XYZScreen() {

    const formikProps = useFormik({
        initialValues,
        validationSchema,
        onSubmit: yourSubmitFunction,
        ...etc
    })

    const someFunctionWithLogic = () => {
        // Set the value of the number field here:
        formikProps.setFieldValue("number", someNumber)
    }

    return (
        <Screen>
            {/* No need for Formik component */}
            <FormField
                name="number"
                placeholder="Number"
                value={formikProps.values.number} // or whatever the value is
                onChange={formikProps.handleChange}
            />
        </Screen>
    );
}

因此，您基本上是在函数体中设置了所有表单道具，并且您可以在那里访问它们。 Formik 有很多很棒的帮助钩子和函数，我强烈建议您梳理一下文档。

编辑：另一种方式

如果你真的喜欢 Formik 标签，你可以继续使用它。只需创建一个 Formik 包装器组件，并使用 useFormikContext 在后代中使用您的自定义逻辑：

 // FormWrapper.js

const FormWrapper = () => (
  <Formik
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={yourOnSubmitFunction}
  >
    <SomeChild />
  </Formik>
)

// SomeChild.js

const SomeChild = () => {

  // returns all values and methods from your Formik tag
  const formikProps = useFormikContext()

  const someFunctionWithLogic = () => {
    formikProps.setFieldValue("number", someNumber)
  }

  return (
    <Screen>
      <FormField
        name="number"
        placeholder="Number"
        value={formikProps.values.number} // or whatever the value is
        onChange={formikProps.handleChange}
      />
    </Screen>
    );
}

原文由 Seth Lutske 发布，翻译遵循 CC BY-SA 4.0 许可协议