<Field validate> 里面是否可以使用 Formik 道具

Question

我有 2 个字段。一旦第一个字段的输入被验证为 OK，第二个字段应该被自动填充。为了填充第二个字段，我需要访问 formik 的辅助方法，我们通常在 <Field>.

中使用这些方法

与formik相关的部分代码：

const validateRoutingNumber = (value: string) => {
  // props.form.setFieldValue('financialInstitution', 'ANYTHING'); <---- Can do something like this?
  return;
}

<Formik initialValues={initialValues} validationSchema={Schema} validateOnMount onSubmit={submitForm}>
   <Form>  
    <Field name="routingNumber" validate={validateRoutingNumber}>
      {(props: FieldProps) => (
        <TextField
          variant="outlined"
          {...props.field}
          {...textErrors(props.meta)}
          type="text"
          inputProps={{'aria-label': t('routingNumber')}}
        />
      )}
    </Field>

有没有办法像我们在 <TextField> 中那样访问 <Field> 中的 props？

Answer 1

我发现我可以访问所需的 formik 属性。以类似的方式提供对 <TextField> 级别的 formik 属性的访问，可以使用 render props tehnique.

提供对 <Formik> 级别的访问

提供所需行为的代码部分：

const validateRoutingNumber = async (value: string, formikProps: FormikProps<any>) => {
  console.log('formikProps', formikProps);
  ....
}

<Formik initialValues={initialValues} validationSchema={Schema} validateOnMount onSubmit={submitForm}>
  {(formikProps: FormikProps<any>) => (
    <Form>  
      <Field name="routingNumber" validate={(value: string) => validateRoutingNumber(value, formikProps)}>
        {(props: FieldProps) => (
        <TextField

youtube 上有很好的关于 formik 用法的视频资料 - https://www.youtube.com/watch?v=0TFIBPyitXo

<Field validate> 里面是否可以使用 Formik 道具

Is there access to Formik props inside <Field validate>

reactjs

formik