ReactJS，Formik - 验证字段，将值与另一个进行比较答案

【问题标题】：ReactJS, Formik - validate field, compare value to anotherReactJS，Formik - 验证字段，将值与另一个进行比较
【发布时间】：2020-11-19 10:05:36
【问题描述】：

通过将一个字段的值与另一个字段的值进行比较来验证一个字段的正确语法是什么？我正在使用具有相当嵌套结构的 Formik 表单，并且我准备了 Codesandbox。

我尝试将 forwardRef 添加到子组件，然后尝试通过父组件中的 useRef() 检索它，但是当尝试将其集中在父组件内时，我一直将 ref.current 设为未定义。

【问题讨论】：

标签： reactjs parent formik ref

【解决方案1】：

如果您想将一个字段的值与另一个字段的值进行比较，您可以使用来自 yup 验证模式的yup.ref() 来实现。例如，要检查 email_address_1 是否与 email_address_2 不同，您可以执行以下操作：

const validationSchema = yup.object().shape({
  email_address_1: yup.string().email().required(),
  email_address_2: yup.string().email()
    .optional().notOneOf([yup.ref("email_address_1")], "Must be a different email")
});

【讨论】：

【解决方案2】：

您可能需要检索 formik 值来进行一些自定义验证

示例：

 {({ status, values, isValid, isSubmitting }) => (
    <Form>
      <SetOfFields doValidate={(inputValue) => validate(inputValue, values)} />
    </Form>
  )}

【讨论】：

【解决方案3】：

只需添加一个validate 函数（作为参数添加到您的useFormik 函数或作为道具添加到您的Formik 组件）并像这样实现它：

export default function validate(values) {

    const errors = {};

    if (values.field1 !== values.field2) {
        errors.field2 = 'field1 must match field2';
    }
    return errors;
};

【讨论】：