Question

我正在将Formik和Yup一起用于我的React Forms。一切正常，除了Yup的一件令人讨厌的事情。

每次，我在刚刚输入有效值（电子邮件，用户名，密码，selectedValues）的字段中单击选项卡或将焦点移到非焦点上，我得到的错误消息会显示一秒钟。

这是我的Yup模式：

  [ActionMode.ADD_USER]: Yup.object().shape({
    username: Yup.string().required('Username is required'),
    email: Yup.string()
      .email('Provide a valid email address')
      .nullable(),
    password: Yup.string().required('Password is required'),
    confirmPassword: Yup.string()
      .required('Password confirmation is required')
      .oneOf([Yup.ref('password')], 'Passwords do not match'),
    groups: Yup.array()
      .of(Yup.string())
      .required('Group is required')

这是该表单的两个字段：

<Field
        type="text"
        id="new-username"
        name="username"
        autoComplete="non-username"
        validate={debounceUsernameValidation}
        render={({ field, form: { errors, touched } }) => (
          <div className="pb-2">
            <label className="font-weight-bold" htmlFor="username">
              Username <Asterisk />
            </label>
            <input
              {...field}
              placeholder="Username, (Required)"
              id="username"
              className={classNames('form-control', {
                'is-invalid': errors.username && touched.username
              })}
            />
            <ErrorMessage name={field.name} component={FormErrorMessage} />
          </div>
        )}
      />
      <Field
        type="email"
        id="new-email"
        name="email"
        autoComplete="non-email"
        render={({ field, form: { errors, touched } }) => (
          <div className="pb-2">
            <label className="font-weight-bold" htmlFor="username">
              Email
            </label>
            <input
              {...field}
              placeholder="Email"
              id="email"
              className={classNames('form-control', {
                'is-invalid': errors.email && touched.email
              })}
            />
            <ErrorMessage name={field.name} component={FormErrorMessage} />
          </div>
        )}
      />

关于那为什么会发生，我没有最模糊的想法。我在任何地方都看不到代码的这种发生原因，但可能会丢失一些东西。谢谢您的时间。.

我正在看CodeSandBox上的示例，我看到的唯一区别是用户使用的是普通输入字段而不是Formik字段，而我尝试这样做却没有用。

是的转到下一个字段时，仅出现1秒钟验证错误

0 个答案: