select 使用 Formik 和 Yup 的按钮时，单选按钮验证不会消失

Question

我正在使用下一个 js 处理注册表单，我使用了表单中的 Formik 和 Yup 进行验证，除了单选按钮外，所有东西都工作正常。错误显示正确，但是当我 select 一个单选按钮时，错误并没有消失。我找不到解决此问题的任何方法。

这是我的表单代码：

<Formik
        initialValues={{
          email: "",
          password: "",
          confirmPassword: "",
          accountType: "",
          accountDescribe: "",
        }}
        validationSchema={validate}
        onSubmit={values => console.log("register", values)}
      >
        {formik => (
          <div>
            <Form className="space-y-6">
              <div>
                <label
                  for="email"
                  className="block text-sm font-medium text-gray-700"
                >
                  {" "}
                  Email address{" "}
                </label>
                <div className="mt-1">
                  <TextField id="email" name="email" type="email" />
                </div>
              </div>

              <div>
                <label
                  for="password"
                  className="block text-sm font-medium text-gray-700"
                >
                  {" "}
                  Password{" "}
                </label>
                <div className="mt-1">
                  <TextField
                    id="password"
                    name="password"
                    type="password"
                  />
                </div>
              </div>
              <div>
                <label
                  for="confirmPassword"
                  className="block text-sm font-medium text-gray-700"
                >
                  {" "}
                  Confirm password{" "}
                </label>
                <div className="mt-1">
                  <TextField
                    id="confirmPassword"
                    name="confirmPassword"
                    type="password"
                  />
                </div>
              </div>

              <div class="mt-4">
                <span class="text-gray-700">
                  How did you hear about us?
                </span>
                <div class="mt-2">
                  <Radio
                    type="radio"
                    name="accountType"
                    value="google"
                    label="Google"
                  />
                  <Radio
                    type="radio"
                    name="accountType"
                    value="facebook"
                    label="Facebook"
                  />
                  <Radio
                    type="radio"
                    name="accountType"
                    value="instagram"
                    label="Instagram"
                  />
                  <Radio
                    type="radio"
                    name="accountType"
                    value="person/business"
                    label="Person/Business"
                  />
                  <Radio
                    type="radio"
                    name="accountType"
                    value="other"
                    label="Other"
                  />
                </div>
                <span className="text-red-600">
                  <ErrorMessage
                    name="accountType"
                    className="text-red-600"
                  />
                </span>
              </div>
              <div class="mt-4">
                <span class="text-gray-700">What best describe you?</span>
                <div class="mt-2">
                  <Radio
                    type="radio"
                    name="accountDescribe"
                    value="salon, spa or barbershop owner"
                    label="Salon, spa or Barbershop Owner"
                  />
                  <Radio
                    type="radio"
                    name="accountDescribe"
                    value="licensed professional"
                    label="Licensed professional"
                  />
                  <Radio
                    type="radio"
                    name="accountDescribe"
                    value="student"
                    label="Student"
                  />
                  <Radio
                    type="radio"
                    name="accountDescribe"
                    value="school"
                    label="School"
                  />
                </div>
                <span className="text-red-600">
                  <ErrorMessage name="accountDescribe" />
                </span>
              </div>
              <div>
                <button
                  type="submit"
                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Register
                </button>
              </div>
            </Form>
          </div>
        )}
      </Formik>

这是我的验证模式：

const validate = Yup.object().shape({
email: Yup.string().email("Email id invalid").required("Email is required"),
password: Yup.string()
  .min(6, "Password must be at least 6 characters")
  .required("Password is required"),
confirmPassword: Yup.string()
  .oneOf([Yup.ref("password"), null], "Password must match")
  .required("Confirm password is required"),
accountType: Yup.string().required("Select one of the above button"),
accountDescribe: Yup.string().required("Select one of the above button"),
});

这是我的单选按钮组件：

import {useField} from "formik";
export const Radio = ({type, label, ...props}) => {
const [field, meta] = useField(props);
console.log(props);
return (
 <>
  <label class="inline-flex items-center mr-6">
    <input type={type} name={field.name} value={field.value} />
    <span class="ml-2">{label}</span>
  </label>
 </>
);
};

Answer 1

将此代码放入您的单选按钮组件中

import {useField} from "formik";
export const Radio = ({type, label,...props}) => {
   const [field, meta] = useField(props);
   return (
     <>
       <label className="inline-flex items-center mr-6">
         <input  type={type} {...field}{...props} />
         <span className="ml-2">{label}</span>
       </label>
     </>
   );
 };

select 使用 Formik 和 Yup 的按钮时，单选按钮验证不会消失

Radio button validation not disappear when select a button using Formik and Yup

javascript

reactjs

next.js

yup

formik