性别类型的单选按钮选择在 React 中不起作用，是的和 Formik

问题描述

我正在通过 Formik(useFormik) 创建一个表单，是的。但是，首先，我创建了名为 FormInput 的自定义可重用组件，如下所示：

import React,{ ReactNode } from "react";

import {
  GroupContainer,FormInputContainer,FormInputLabel,FormInputIcon,} from "./formInput.styles";

interface FormInputProps {
  onChange?: (event: React.SyntheticEvent) => void;
  onBlur?: (event: React.SyntheticEvent) => void;
  label: string;
  value?: any;
  children?:ReactNode;
  checkBox?: boolean;
  radioBtn?: boolean;
  name: string;
  type: "password" | "email" | "text" | "radio" | "checkBox";
  checked?: boolean;
  emailIcon?: string;
  passwordIcon?: string;
}

const FormInput = ({
  onChange,label,value,emailIcon,children,passwordIcon,...props
}: FormInputProps) => (
  <GroupContainer {...props}>
    <FormInputContainer value={value} onChange={onChange} {...props} />
    {value ? <FormInputLabel {...props}>
        {emailIcon && <FormInputIcon src={emailIcon} />}
        {passwordIcon && (
          <FormInputIcon passwordIcon={passwordIcon} src={passwordIcon} />
        )}
      </FormInputLabel>: (
      <FormInputLabel {...props}>
        {emailIcon && <FormInputIcon src={emailIcon} />}
        {passwordIcon && (
          <FormInputIcon passwordIcon={passwordIcon} src={passwordIcon} />
        )}
        {label}
      </FormInputLabel>
    )}
    {children}
  </GroupContainer>
);

export default FormInput;

然后，通过使用 FormInput 组件，我为男性和女性的性别类型选择创建了两个 radio 类型的输入字段，如下所示：

<GenderContainer>
          <FormInput
            value={formik.values.gender}
            type="radio"
            name="gender"
            label="Male"
            checked={formik.values.gender==='Male'}
            onChange={formik.handleChange}
            radioBtn={true}
          >
            {formik.touched.gender && formik.errors.gender ? (
              <ErrorMessage>{formik.errors.gender}</ErrorMessage>
            ) : null}
          </FormInput>
          <FormInput
            value={formik.values.gender}
            type="radio"
            name="gender"
            checked={formik.values.gender==='Female'}
            onChange={formik.handleChange}
            radioBtn={true}
            label="Female"
          />
        </GenderContainer>

但是当我选择性别类型时，没有选择性别类型（。另外，这里是我正在使用的 useFormik 详细信息：const

initialValues = {
  name: "",email: "",password: "",country: "",gender: "",terms: false,};

const validationSchema = yup.object().shape({
  name: yup
    .string()
    .matches(/^[A-Za-z ]*$/,"Please enter a valid name")
    .required("Please enter your name"),email: yup.string().email().required("Please enter your name"),password: yup
    .string()
    .matches(/^.*(?=.{6,})/,"Password must contain at least 6 symbols")
    .required("Please enter your password"),gender: yup.string().required("You must select the gender"),country: yup.string().required("You must select your country"),terms: yup.boolean().required("The terms and conditions must be accepted.").oneOf([true],"You must accept the policies"),});

const formik = useFormik({ initialValues,validationSchema,onSubmit });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）