Question

大家好，我在我的项目中使用 react-select 以及 Formik 和 Yup 进行验证问题是即使我在通过 Yup 验证后在控制台中看到错误对象中出现错误，但我无法显示该错误在前端

这是下面的代码

export default function FormSection({
  onContinueButton,
  allFormValues,
  holders,
}) {
  console.log(holders, "hol12");

  const formik = useFormik({
    initialValues: {
      firstBirthDate: "",
      firstSmoker: "",
      secondBirthDate: "",
      secondSmoker: "",
    },

    onSubmit: (values, { setSubmitting }) => {
      console.log(formik.errors);
      console.log(formik.values, "valqwqrwe");

      setSubmitting(false);
      allFormValues(formik.values);
      console.log(values);
    },
    validationSchema: validationSchemaSectionTwo,
  });
  const options = [
    { value: "Não", label: "Não" },
    { value: "Sim", label: "Sim" },
  ];

  const handleChangeFirstHolder = (selectedOption) => {
    formik.setFieldValue("firstSmoker", selectedOption);
  };


  return (
    <div className="secondSection">
      <form onSubmit={formik.handleSubmit}>
        <React.Fragment>
 <p className="tab-text">Data Nascimento</p>
            <DatePicker
              selected={formik.values.firstBirthDate}
              onChange={date => {
                formik.setFieldValue('firstBirthDate', date)
              }}
              className="birth-date-calendar"
              dateFormat="dd-MM-yyyy"
              name="firstBirthDate"
              placeholderText="DD-MM-AAAA"
              onBlur={formik.handleBlur}
            />
            {formik.errors.firstBirthDate && formik.touched.firstBirthDate && (
              <div className="formik-errors">{formik.errors.firstBirthDate}</div>
            )}


              <p className="tab-text">É fumador?</p>
              <Select
                value={formik.values.firstSmoker}
                name="firstSmoker"
                onChange={handleChangeFirstHolder}
                options={options}
                className="select-smoker"
                onBlur={formik.handleBlur}
              />
              {formik.errors.firstSmoker && formik.touched.firstSmoker && (
                <div className="formik-errors">{formik.errors.firstSmoker}</div>
              )}
            </React.Fragment>
    
            <br />
      </form>
    </div>
  );
}

我也试过

onBlur={()=> {
       formik.setTouched({ firstSmoker: true });
   }}

但是这个方法的作用是一旦我集中注意力在 <Select/> 标签上，但随后将 formik.touched.firstBirthDate 设置为 undefined

React Select 给出 formik.touch 问题

0 个答案: