formik + yup и проверяющие поля, которые находятся в дочернем компоненте реакции - PullRequest
Новая
       15

formik + yup и проверяющие поля, которые находятся в дочернем компоненте реакции

0 голосов
/ 07 июня 2019

Допустим, у меня есть следующий код: 

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/> для адреса, например, как создается поле электронной почты.

Поле электронной почты работает нормально, вызывая все события и правильно показывая ошибки проверки, но я не могу получить любой из formik <Field/> в <AddressForm/>, чтобы вызвать любые события, такие как касание, или показать ошибки проверки. Я предполагаю, потому что formikProps не передается в <AddressForm/>, но я не могу понять, что делать. Я тщательно изучил документацию и стекопотоки, но не смог найти примеров того, как это сделать.

...