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

我正在使用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>
            )
        }
    }

const SignupSchema=Yup.object（）.shape({
电子邮件：Yup.string（）
.email（“无效电子邮件”）
.required（“required”），
密码：Yup.string（）
.min（4，‘密码长度必须为四个字符！'）
.max（20，“太长！”）
.required（“required”），
});
类寄存器扩展组件{
render（）{
返回(
{
console.log（值）；
}}
>
{（{错误，触摸}）=>(
{errors.email&&touch.email？{errors.email}:null}
{errors.password&&toucted.password？{errors.password}:null}
提交
)}
)
}
}

将性别初始值更改为男性

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

(
男性
女性
)}
/>

这可以简单地完成，但要使用下面的代码。这对我很有用： 您需要

从“Formik”导入Formik

{console.log（值）；}
>
{（formik）=>(
//你的其他投入。。。。。。。。
男性
女性
//你的其他投入。。。。。。
提交
)}

此解决方案使您有机会拥有两个以上的选项

假设您有一个名为

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;

从“React”导入React；
从'formik'导入{Field}；
常量单选按钮=（道具）=>{
const{label，name，options，…rest}=props；
返回(
{label}
{
（{field}）=>{
返回options.map（选项=>{
返回(
{option.key}
);
})
}
}
);
};
导出默认单选按钮；

然后将可重用的

RadioButton

组件放在

Main.js

中希望单选按钮输入渲染的任何位置

结果用户界面将是3个单选按钮，其值为“值1”、“值2”和“值3”

---

您可以查看此信息以了解更多信息。

如何验证您的表单？是吗？还是定制的Formik验证？我用过是的

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;