Блог

У меня есть родительский компонент с Formik

Родительский компонент

 <Formik
      validationSchema={validationSchema}
      render={({ props }) => (
       //… more code 
       <ChildrenComponent props={props} />
      )}
   />
  

Дочерние компоненты

 import ExternalLib from "external_lib";
function ChildrenComponent ({classes, ...props}) {
    <ExternalLib
          catalogos={state.nacionalidades}
          classes={classes}
          name={"Applicant.TypeOfPerson.Nationality"}
          label={"Nacionalidades"}
          setFieldValue={props.setFieldValue}
      />
}
  

Внешняя библиотека

Эта внешняя библиотека будет иметь функциональность автозаполняемого текста для поиска национальностей, стран и т.д.

 export default class ExternalLib extends Component {
//…more code
return (
       <div ref={this.divWidth}>
                <Formik> // The lifecycle of this Formik is different than TransactForm for that reason 
                         //my  Field  called "Applicant.TypeOfPerson.Nationality" doesn’t save the 
                         //value unless if I use the registerField of this Formik and do the same with 
                         //the props.registerField from parent Formik. And the 
                         //validationSchema from Formik parent doesn’t work with this field for the 
                         //same reason (the lifecycle of this Formik is different than Formik parent).
                         //Is there a way to pass the Formik props Parent in the Formik of this 
                         //library?
            <Field
name={this.props.name} // the props.name is  //__"Applicant.TypeOfPerson.Nationality” sent by the children component
            type="text"
            label={this.props.label}
            fullWidth
            component={TextField}
            autoComplete="off"
            required
            onKeyUp={this.onKeyUp}
            InputProps={{
              onBlur:this.onBlur,
              classes: {
                  input: "Field-fontFamily",
                }
            }}
          />
        </Formik>
        {suggestionsListComponent}
      </div>
    );
}
  

Жизненный цикл этого Formik отличается от TransactForm, по этой причине мое поле называется «Заявитель».TypeOfPerson.Nationality» не сохраняет значение, если только я не использую registerField этого Formik и не делаю то же самое с props.registerField из родительского Formik. И схема проверки из родительского Formik не работает с этим полем по той же причине (жизненный цикл этого Formik отличается от родительского Formik).
Есть ли способ передать родительское поле Formik props в Formik этой библиотеки?

Версия Formik 1.4.2

Я не уверен на 100% в структуре ваших пользовательских компонентов или в том, чего вы пытаетесь достичь с помощью двух компонентов Formik. Вы можете удалить render реквизит из первого Formik и заменить его component реквизитом, который определяет пользовательский компонент, которому будут переданы все реквизиты, но вам нужно будет управлять ими вручную внутри.

Или вы могли бы просто поместить <Field/> компонент в render prop и назначить ему свой пользовательский компонент подобным образом <Field name="application.typeofperson.nationality" component={MyComponent}/> . Возможно, было бы проще объединить всю необходимую функциональность в один компонент вместо передачи реквизитов нескольких уровней.