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

Posted 2023-03-13

【中文标题】如何在不提交的情况下访问 formik 字段的当前值？

【英文标题】：How do I access current value of a formik field without submitting?

【发布时间】：2020-06-14 22:17:32

【问题描述】：

如何在我的 React 组件中访问名为 countryCode 的 SelectField 的值？用例是验证方案应该根据国家代码改变。

  <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。我的道具没有任何“值”字段。

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

【问题讨论】：

见https://***.com/a/64912575/4331722

【参考方案1】：

如果你需要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>

【参考方案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>

【讨论】：

如何访问表单范围之外的值？如何将字段的值传递给validationSchema？

@schlingel 我编辑了访问formik之外的值的答案

说实话，我不明白“outsideSetValueHandler”是如何实现我的目标的。但我发现我可以定义一个外部变量并添加this.outsideVariable = values.countryCode。因此，如果您删除该 outsidevaluehandler 部分，我可以将其标记为解决方案。

@aturan23 我想知道如何访问 formik 之外的值

@MelvinOtieno 你可以查看我的最新代码。只需tap。

【参考方案3】：

您可以使用 Field comp 作为包装器从 formik 获取它

import React,  ReactNode  from 'react';
import  Field, FieldProps  from 'formik';
(...other stuffs)

const CustomField = (
  field,
  form,
  ...props
) => 
  const currentError = form.errors[field.name];
  const currentField = field.name;  <------ THIS

  const handleChange = (value) => 
    const formattedDate = formatISODate(value);
    form.setFieldValue(field.name, formattedDate, true);
  ;

  const handleError = (error: ReactNode) => 
    if (error !== currentError) 
      form.setFieldError(field.name, `$error`);
    
  ;

  return (
      <TextField
        name=field.name
        value=field.value
        variant="outlined"
        helperText=currentError || 'happy helper text here'
        error=Boolean(currentError)
        onError=handleError
        onChange=handleChange
        InputLabelProps=
          shrink: true,
        
        inputProps=
          'data-testid': `$field.name-test`, <---- very helpful for testing
        
        ...props
      />
    </MuiPickersUtilsProvider>
  );
;


export default function FormikTextField( name, ...props ) 
  return <Field variant="outlined" name=name component=CustomField fullWidth ...props />;