reactjs - 如何隐藏错误消息并仅在 yup 测试中突出显示字段

Question

我有一个运行大量验证的架构。但是我不想在出现错误时显示一些错误消息，尽管我希望突出显示该字段。提供空字符串而不是错误消息会导致 formik 在验证运行时不显示红色输入字段。这是我当前的代码

const LocationDetailsSchema = Yup.object().shape({
  location: Yup.string(),
  locationCategory: Yup.string(),
  lat: Yup.number()
    .min(-85, "Not a valid Latitude")
    .max(85, "Not a valid Latitude")
    .nullable()
    .transform(function(value) {
      return this.isType(value) ? value : null;
    })
    .test(
      "match",
      "", //empty string fails, putting a text shows but i don't want the text to appear
      function(){
        if (principalAmount>=500000) return true;
        return false;
      }
    ),
  lon: Yup.number()
    .min(-180, "Not a valid Longitude")
    .max(180, "Not a valid Longitude")
    .nullable()
    .transform(function(value) {
      return this.isType(value) ? value : null;
    })
    .test(
      "match",
      "Is valid", // this works but i don't want the text to appear either
      function(){
        if (principalAmount>=500000) return true;
        return false;
      }
    ),
});

Answer 1

您可能希望以这种方式使用 formik，这样您就可以访问字段错误(如果有的话):

 <Formik
        initialValues={initialValues}
        onSubmit={onSubmit}
        validationSchema={validationSchema}
      >
        {(props) => {
          return (
            <Form>
              <Input
                style={{
                  direction: "rtl",
                  border:
                    props.touched.name && props.errors.name ? "red" : "none",
                }}
                onBlur={() => props.setFieldTouched("name")}
                onChange={(e) => props.setFieldValue("name", e.target.value)}
                props={props}
                className={""}
              />
            </Form>
          );
        }}
      </Formik>

如果它被触摸并且有错误，我在这里将边框样式应用于组件:

 border : props.touched.name && props.errors.name ? "red" : "none",

您可以使用此方法应用自己的逻辑和样式。