reactjs - 如何在 Formik Validations Reactjs 中添加单选按钮？

Question

我正在使用 Formik 验证我的注册表我想通过单选按钮添加验证性别我该怎么做。我无法添加单选按钮。

这就是我所做的:-

 const SignupSchema = Yup.object().shape({
        email: Yup.string()
          .email('Invalid email')
          .required('Required'),
        password: Yup.string()
          .min(4, 'Password Must be four characters long!')
          .max(20, 'Too Long!')
          .required('Required'),

      });
    class Register extends Component {
        render() {
            return (
                   <Formik
                     initialValues={{
                        email: '',
                        password:'',
                        gender:'',

                     }}
                     validationSchema={SignupSchema}
                     onSubmit={values => {
                       console.log(values);
                     }}
                   >
                     {({ errors, touched }) => (
                       <Form>

                         <Field style={customStyles.textfield} placeholder="Email" name="email" type="email" />
                         {errors.email && touched.email ? <div}>{errors.email}</div> : null}

                         <Field placeholder="Enter Password" name="password" type="password" />
                         {errors.password && touched.password ? <div >{errors.password}</div> : null}


                         <button type="submit">Submit</button>
                       </Form>
                     )}
                   </Formik>
             </div>
            )
        }
    }

Answer 1

将性别初始值更改为 男

        <Field
          name="gender"
          render={({ field }) => (
            <>
              <div className="radio-item">
                <input
                  {...field}
                  id="male"
                  value="male"
                  checked={field.value === 'male'}
                  name="type"
                  type="radio"
                />
                <label htmlFor="male">Male</label>
              </div>

              <div className="radio-item">
                <input
                  {...field}
                  id="female"
                  value="female"
                  name="type"
                  checked={field.value === 'female'}
                  type="radio"
                />
                <label htmlFor="female">Female</label>
              </div>
            </>
          )}
        />