如何解决性别类型的单选按钮选择在 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 举报,一经查实,本站将立刻删除。