React-Hooks-Form v 6.x.x with YUP 不能解决所有验证

问题描述

我在 React 中使用 Ionic。为了构建我的表单，我使用 react-hooks-form 版本 6.x.x。 我为验证定义了一个 Yup 对象，如下所示：

const validationSchema = object().shape
({
    email: string()
           .required("A mező kitöltése kötelező!")
           .email("Kérem valós e-mail címet adjon meg!"),password: string()
              .required("A mező kitöltése kötelező!")
              .min(8,"A jelszó hosszának legalább 8 karakternek kell lennie!"),});

我在我的表单中使用它，如下所示：

export const LoginComponent: React.FC = () =>
{
    const [serverError,setServerError] = useState<any>()

    const { control,handleSubmit,errors } = useForm<LoginRequest>
    ({
        mode: "onChange",reValidateMode: "onSubmit",defaultValues:
        {
            email: "",password: ""
        },resolver: yupResolver(validationSchema)
    });

    const onSubmit = async (data: LoginRequest): Promise<void> =>
    {
        console.log(JSON.stringify(data));
    };

    return (
        <IonGrid class="ion-text-center ion-margin">
            <IonRow>
                <IonCol offset="1" size="10" ssize-sm></IonCol>
            </IonRow>
            <IonRow className="ion-align-self-center">
                <IonCol offset="1" size="10" size-sm><IonLabel class="title">BEJELENTKEZÉS</IonLabel></IonCol>
            </IonRow>
            <IonRow>
                <IonCol>
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <HookFormEmailBox name="email"
                                          label="E-mail cím"
                                          control={control}
                                          errors={errors} />
                        <HookFormPasswordBox name="password"
                                             label="Jelszó"
                                             control={control}
                                             errors={errors} />
                        <IonButton expand="block" type="submit" className="ion-margin-top">
                            BEJELENTKEZÉS
                        </IonButton>
                    </form>
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size="12">
                    {serverError && <ServerErrorComponent data={serverError}/>}
                </IonCol>
            </IonRow>
        </IonGrid>
    );
};

我的 HookFormEmailBox 和 HookFormPasswordBox 组件是：

import { Control,DeepMap,FieldError } from "react-hook-form";

export interface IBaseProps
{
    name: string;
    control: Control;
    errors?: DeepMap<Record<string,any>,FieldError>;
}


interface IHookFormEmailProps extends IBaseProps
{
    label: string;
}

const HookFormEmailBox: React.FC<IHookFormEmailProps> = (props: IHookFormEmailProps) =>
{
    return (
        <React.Fragment>
            <IonItem>
                {
                props.label &&
                <IonLabel position="floating">{props.label}</IonLabel>
                }
                <Controller as=
                            {
                                <IonInput aria-invalid={props.errors && props.errors[props.name] ? "true" : "false"}
                                          aria-describedby={`${props.name}Error`}
                                          type="email"/>
                            }
                            name={props.name}
                            control={props.control}
                            onChangeName="onIonChange">
                </Controller>
            </IonItem>
            {
                props.errors && props.errors[props.name] &&
                (
                    <IonText color="danger" className="ion-padding-start">
                        <small>
                            <span role="alert" id={`${props.name}Error`}>
                                {props.errors[props.name].message}
                            </span>
                        </small>
                    </IonText>
                )
            }
        </React.Fragment>
    );
}

export default HookFormEmailBox;

export interface IHookFormPasswordProps extends IBaseProps
{
    label: string;
}

const HookFormPasswordBox: React.FC<IHookFormPasswordProps> = (props: IHookFormPasswordProps) =>
{
    return (
        <React.Fragment>
            <IonItem>
                {
                props.label &&
                <IonLabel position="floating">{props.label}</IonLabel>
                }
                <Controller as=
                            {
                                <IonInput aria-invalid={props.errors && props.errors[props.name] ? "true" : "false"}
                                          aria-describedby={`${props.name}Error`}
                                          type="password"/>
                            }
                            name={props.name}
                            control={props.control}
                            onChangeName="onIonChange">
                </Controller>
            </IonItem>
            {
                props.errors && props.errors[props.name] &&
                (
                    <IonText color="danger" className="ion-padding-start">
                        <small>
                            <span role="alert" id={`${props.name}Error`}>
                                {props.errors[props.name].message}
                            </span>
                        </small>
                    </IonText>
                )
            }
        </React.Fragment>
    );
}

export default HookFormPasswordBox;

现在我的问题是，我的表单验证了所需的规则，但不是下一个，不是电子邮件，不是密码。 我正在使用以下软件包：

"@hookform/resolvers": "^1.3.2","react-hook-form": "^6.14.1",“是的”：“^0.32.8” "@types/yup": "^0.29.11"

据我所知，react-hook-forms 库总是使用默认值，它从不更新状态。

谢谢

解决方法

所以我想通了，发生了什么变化，我们需要像这样修改我们的输入组件：

import { IonItem,IonLabel,IonInput,IonText } from "@ionic/react";
import React from "react";
import { Controller } from "react-hook-form";
import { InputType } from "../Types/InputType";
import { IBaseProps } from "../Interfaces/BaseProps";
import { InputValueType } from "./../Types/InputValueType";

export interface IHookFormTextBoxProps extends IBaseProps
{
    label: string;
    type: InputType;
    value?: InputValueType
}

const HookFormTextBox: React.FC<IHookFormTextBoxProps> = (props: IHookFormTextBoxProps) =>
{
    return (
        <React.Fragment>
            <IonItem>
                {
                props.label &&
                <IonLabel position="floating">{props.label}</IonLabel>
                }
                <Controller render={ ({ value,onChange,onBlur }) =>
                            (
                                <IonInput aria-invalid={props.errors && props.errors[props.name] ? "true" : "false"}
                                          aria-describedby={`${props.name}Error`}
                                          type={props.type}
                                          onIonChange={onChange}
                                          onBlur={onBlur}
                                          value={value} />
                            )}
                            defaultValue={props.value ? props.value : ""}
                            name={props.name}
                            control={props.control}
                            onChangeName="onIonBlur">
                </Controller>
            </IonItem>
            {
                props.errors && props.errors[props.name] &&
                (
                    <IonText color="danger" className="ion-padding-start">
                        <small>
                            <span role="alert" id={`${props.name}Error`}>
                                {props.errors[props.name].message}
                            </span>
                        </small>
                    </IonText>
                )
            }
        </React.Fragment>
    );
}

export default HookFormTextBox;