У меня есть 2 поля. Второе поле должно быть заполнено автоматически после подтверждения правильности ввода первого поля. Чтобы заполнить второе поле, мне нужно получить доступ к вспомогательным методам 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>
Есть ли способ получить доступ к props
внутри <Field>
, как мы делаем внутри <TextField>
?
Я узнал, что могу получить доступ к нужным свойствам формы. Аналогично тому, как предоставляется доступ к свойствам формика на <TextField>
уровне, доступ может быть предоставлен на <Formik>
уровне с помощью техники рендеринга реквизита.
Часть кода для обеспечения желаемого поведения:
const validateRoutingNumber = async (value: string, formikProps: FormikProps<any>) => {
console.info('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
На ютубе есть хорошие видеоматериалы по использованию формика - https://thewikihow.com/video_0TFIBPyitXo