如何在不提交的情况下访问 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 或 Formik 中的类似建议）但两者都返回 undefined 或 null。我的道具没有任何“值”字段。

编辑：发现一个丑陋的方式：document.getElementsByName("countryCode")[0].value。更好的方法表示赞赏。

Answer 1

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

   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>

Answer 2

您可以访问这样的值：

<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>