如何在Formik表单验证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>
            )
        }
    }

- Chandrapratap

---

你如何验证你的表单？使用YUP吗？还是自定义Formik验证？ - demkovych

我已经使用了YUP。 - Chandrapratap

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>
            </>
          )}
        />

- demkovych

Answer 2

该解决方案为您提供了超过两个选项的机会。

假设您有一个名为Main.js的文件，并且您想在其中放置一个单选按钮输入。首先，在Main.js中提供单选按钮的选项列表。

const radioOptions = [
    { key: 'Option 1', value: 'value 1' },
    { key: 'Option 2', value: 'value 2' },
    { key: 'Option 3', value: 'value 3' }
  ];

接下来，创建一个名为 RadioButton.js 的文件，并使用以下代码：

import React from 'react';
import { Field } from 'formik';

const RadioButton = (props) => {
  const { label, name, options, ...rest } = props;
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <Field name={name} {...rest} >
        {
          ({ field }) => {
            return options.map(option => {
              return (
                <React.Fragment key={option.key}>
                  <input
                    type='radio'
                    id={option.id}
                    {...field}
                    value={option.value}
                    checked={field.value === option.value}
                  />
                  <label htmlFor={option.id}>{option.key}</label>

                </React.Fragment>
              );
            })
          }
        }
      </Field>
    </div>
  );
};

export default RadioButton;

然后将可重复使用的RadioButton组件放在Main.js中的任何您想要单选按钮输入呈现的位置。

结果UI将是3个带有值 "value 1"、"value 2" 和 "value 3" 的单选按钮。

您可以查看这个很棒的YouTube系列以了解更多信息。

- HeLin

Answer 3

这可以通过以下代码轻松完成。它对我非常有效： 您需要import Formik from "formik"

<Formik
  initialValues={{
     email: '',
     password:'',
     gender:'',
   }}
  // validations
   validationSchema={SignupSchema}
   onSubmit={values => { console.log(values); }}
  >
     {(formik) => (
          <Form onSubmit={formik.handleSubmit}>
              //Your Other inputs........
              <div className="custom-control">
                 <input
                    id="male"
                    type="radio"
                    value="male"
                    name='gender'
                    onChange={formik.handleChange}
                    defaultChecked={formik.values.gender=== "male"}
                  />
                  <label
                     className="custom-control-label"
                     htmlFor="male"
                   >
                     Male
                   </label>
              </div>
              <div className="custom-control">
                 <input
                    id="female"
                    type="radio"
                    value="female"
                    name='gender'
                    onChange={formik.handleChange}
                    defaultChecked={formik.values.gender=== "female"}
                  />
                 <label
                   className="custom-control-label"
                   htmlFor="female"
                  >
                    Female
                 </label>
              </div>
              //Your Other inputs......
             <button type="submit">Submit</button>
          </Form>
      )}
  </Formik>

- Bryan Austin