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

Question

如何在我的React组件中访问名为SelectField的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>

我试图通过ref来访问它，然后通过 this.props.values(按照 getFieldValue or similar in Formik的建议)来访问它，但是两者都返回的只是未定义的或null。我的 Prop 没有任何“值”字段。

编辑:找到了一个丑陋的方式: document.getElementsByName("countryCode")[0].value。更好的方法是赞赏。

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>