Question

我在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有所不同，因为这个原因，除非我使用此Formik的registerField并对来自于父级Formik。而且出于相同的原因，Formik父级的validationSchema无法与此字段一起使用（此Formik的生命周期不同于Formik父级的生命周期）。有没有办法在该库的Formik中传递Formik道具父母？

Formik版本1.4.2

Answer 1

对于您的自定义组件的结构或您要使用2个Formik组件要完成的工作，我不是100％的。您可以从第一个render中移除Formik道具，然后将其替换为component道具，该道具定义了一个自定义组件，该组件将传递所有道具，但是您需要在内部手动管理它们。

或者您可以将<Field/>组件放置在渲染道具中，然后像<Field name="application.typeofperson.nationality" component={MyComponent}/>那样分配自定义组件。将您需要的所有功能组合到一个组件中可能比将道具传递到多个级别更容易。

反应JS Field Formik生命周期，Field子项与Parent Formik的道具不同

1 个答案: