reactjs - formik + yup 并验证子 react 组件中的字段

Question

假设我有以下代码:

let addressSchema = yup.object().shape({
  firstname: yup.string().required().max(35),
  lastname: yup.string().required().max(35),
  company: yup.string().max(35),
  address1: yup.string().required().max(35),
  address2: yup.string().max(35),
  city: yup.string().required(),
  stateId: yup.string().required(),
  zipcode: yup.string().required().length(5),
  phone: yup.string().required().matches(phoneRegex, 'Phone number is not valid')
});

let checkoutFormSchema = yup.object().shape({
  email: yup.string().email().required(),
  billAddressAttributes: addressSchema,
  shipAddressAttributes: addressSchema,
});

<Formik
    initialValues={this.buildInitialValues()}
    onSubmit={(values, actions) => {
    }}
    validationSchema={checkoutFormSchema}
>
    {formikProps => (
        <FieldWrapper
            Label={<Label placement="left">Email address</Label>}
            Input={<Field type="email" name="email" component={Input} />}
        />
        <AddressFormFields prefix="billAddressAttributes" />
        <AddressFormFields prefix="shipAddressAttributes" />
        )}
</Formik>

哪里<AddressForm/>有一堆formik <Field/>地址的组件，例如电子邮件字段的制作方式。

电子邮件字段工作正常，触发所有事件并正确显示验证错误，但我无法获取任何表单 <Field/>在 <AddressForm/>触发任何事件，例如触摸，或显示验证错误。我猜测是因为 formikProps 没有被传递到 <AddressForm/> ，但我不知道该怎么做。我已经彻底搜索了文档和 stackoverflow，但找不到任何有关如何执行此操作的示例。

Answer 1

AddressForm 应该具有放置在 Formik 组件内的上下文。也许，您在操作字段名称和前缀时犯了一些错误。这是嵌套表单的工作示例:

https://codesandbox.io/s/formik-nested-fields-1nvkj