Question

如何在我的React组件中访问名为SelectField的{{1}}的值？用例是验证方案应根据countryCode进行更改。

countryCode

我试图通过引用然后通过<Formik onSubmit={(values, actions) => this.onSubmit(values, actions.setFieldError)} validationSchema={() => this.registrationValidationSchema()} enableReinitialize={true} initialValues={this.props.initialData} > <Form> <Field name="countryCode" component={SelectField} label="Country" labelClassName="required" options={Object.entries(sortedCountryList).map(x => ({ value: x[1][1], label: x[1][0] }))} /> </Form> </Formik>（如getFieldValue or similar in Formik中的建议）来访问它，但是两者都返回未定义或null。我的道具没有任何“值”字段。

编辑：发现了一个丑陋的方法：this.props.values。赞赏一种更好的方法。

Answer 1

您可以访问以下值：

<Formik
    onSubmit={(values, actions) => this.onSubmit(values, 
    actions.setFieldError)}
    validationSchema={() => this.registrationValidationSchema()}
    enableReinitialize={true}
    initialValues={this.props.initialData}
        >
          {({
            setFieldValue,
            setFieldTouched,
            values,
            errors,
            touched,
          }) => (
            <Form className="av-tooltip tooltip-label-right">
              // here you can access to values
              {this.outsideVariable = values.countryCode}
            </Form>
            )}
        </Formik>

Answer 2

如果需要在formik之外的值，则可以使用ref

   const ref = useRef(null);
   
   const someFuncton = () => {
       console.log(ref.current.values)
   }
   
   <Formik
       innerRef={ref}
       onSubmit={(values, actions) => this.onSubmit(values,
       actions.setFieldError)}
       validationSchema={() => this.registrationValidationSchema()}
       enableReinitialize={true}
       initialValues={this.props.initialData}
   
   />
       <form></form>
   </Formik>

如何在不提交的情况下访问formik字段的当前值？

2 个答案: