当触发单个输入 onChange 时，为什么 Formik 会验证每个输入（包括原始输入）？

Question

我真的很想弄清楚为什么这是一个设计选择以及它如何不再是一个问题。

我有一个包含多个输入的表单，当我开始在任何字段中输入时，整个表单将根据我的验证函数进行验证，从而导致每个验证错误消息都呈现到我的表单上。

该表单甚至没有做任何神奇的事情，我实际上只是接受基本文本输入并验证值是否为空。然而，当我这样做时，福米克认为验证每个领域都是一个好主意，包括我尚未触及的原始领域。

有人可以向我解释一下如何更改此行为，以便仅验证当前触发 onChange 事件的表单吗？

我尝试使用表单的触摸对象来检查哪些尚未触摸，并且仅验证触摸的对象，但这会产生更多问题，特别是在尝试提交表单时。

validateOnChange 和 validateOnBlur 也没有帮助，它们只是关闭验证

再说一次，为什么这是默认行为。谁会希望基于 onChange 事件立即验证整个表单？

我什至尝试使用代替进行字段级验证，甚至会产生相同的行为？我真的不知道如何用这个来制作工作表格。显然人们会这样做，所以如果有人能够逐个领域地解释如何做到这一点，我将非常感激。

  const formik = useFormik({
    initialValues: {
      positionTitle: "",
      experienceRequired: ""
    },
    onSubmit: (values) => {
      console.log("Form output: ", JSON.stringify(values));
      console.log("Errors: ", formik.errors);
    },
    isInitialValid: false,
    validate: validate
    validateOnMount: false,
    validateOnChange: false,
    validateOnBlur: false
  });

<FormikProvider value={formik}>
    <form onSubmit={formik.handleSubmit} className="flex flex-col mt-4">

        <Field
        as="input"
        validate={validateBasicRequired}
        name="positionTitle"
        onChange={formik.handleChange}
        value={formik.values.positionTitle}
        ></Field>
        {formik.errors.positionTitle &&
        formik.errors.positionTitle === "Required" && (
            <BasicValidationError message="Required field."></BasicValidationError>
        )}

        <Select
        name="experienceRequired"
        onChange={handleSelectOnChange}
        options={getMultiSelectOptions(experienceValues)}
        ></Select>
        {formik.errors.experienceRequired &&
        formik.errors.experienceRequired === "Required" && (
            <BasicValidationError message="Required field."></BasicValidationError>
        )}
    </form>
</FormikProvider>

这是我之前在字段级使用的验证函数

  const validate = (values: PostJobForm) => {
    const errors: any = {
      compensation: {},
    };

    if (!values.positionTitle) {
      errors.positionTitle = "Required";
    }

    if (!values.experienceRequired) {
      errors.experienceRequired = "Required";
    }

    return errors;
  };