1

我正在尝试验证我的 Ionic 反应表单，但是在useForm方法中调用 validationSchema 时出现以下错误。我在尝试调用 validationSchema 时遇到的错误useForm是Argument of type '{ validationSchema: ...... is not assignable to parameter of type 'Partial<{ mode: "onBlur"......下面是我的主登录表单代码：

import React, { useState } from "react";
import { IonPage, IonHeader, IonContent, IonToolbar, IonTitle, IonButton, IonAlert, IonItem, IonText, IonInput, IonLabel, IonRouterLink } from "@ionic/react";
import { RouteComponentProps } from 'react-router-dom';
import { LoginService } from "../services/LoginService";
import { LoginResonse } from 'common-models/APIResponses'
import { setIsLoggedIn, setIsAdmin, setEmailAddress } from "../data/user/user.actions";
import { connect } from '../data/connect';
import '../css/app.scss';
import { useForm } from 'react-hook-form';
import LoginInput, {LoginInputProps } from "../components/loginInput";
import { object, string } from 'yup';

interface OwnProps extends RouteComponentProps {}

interface DispatchProps {
  setIsLoggedIn: typeof setIsLoggedIn;
  setIsAdmin: typeof setIsAdmin;
  setEmailAddress: typeof setEmailAddress;
}

interface LoginProps extends OwnProps,  DispatchProps { }


const Login: React.FC<LoginProps>= ({setIsLoggedIn, setIsAdmin, history, setEmailAddress}) => {
  
  const validationSchema = object().shape({
    emailAddress: string().required().email(),
    password: string().required()
  });
  // const [inputEmailAddress, setInputEmailAddress] = useState(''); <---- (1) Also, setting the state to '' doesn't lets me type anything in the input field.
  // const [inputPassword, setInputPassword] = useState('');
  const [showAlert, setShowAlert] = useState<boolean>(false);
  const [canLogin, setCanLogin] = useState<boolean>(false);
  const [formSubmitted, setFormSubmitted] = useState(false);

  const { control, handleSubmit} = useForm({
    validationSchema,
  });
  
  const formFields: LoginInputProps[] = [
    {
      name: "emailAddress",
      component: <IonInput name="emailAddress" type="email" value="inputEmailAddress" spellCheck={false} autocapitalize="off" />,
      label: "Email Address"
    },
    {
      name: "password",
      component:  <IonInput name="password" type="password" value="inputPassword"/>,
      label: "Password"
    }
  ];

  return (
    <IonPage id="login-registration-page">
    <IonHeader>
      <IonToolbar color="primary">
        <IonTitle>Login</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
          <form className="login-registration-form ion-padding" onSubmit={handleSubmit(loginUser)}>
            {formFields.map((field, index) => (
              <LoginInput {...field} control={control} key={index} />
            ))}
            
            <IonItem lines="none">
              <IonRouterLink className="link" routerLink={'/forgot_username'}>Forgot Username?</IonRouterLink>
            </IonItem>
           

            <IonItem lines="none">
              <IonRouterLink className="link" routerLink={'/forgot_password'}>Forgot Password?</IonRouterLink>
            </IonItem>
            
           
            <IonButton disabled={!canLogin} expand="block">Login</IonButton>
          
          </form>
        
        <IonAlert
          isOpen={showAlert}
          backdropDismiss={false}
          onDidDismiss={() => setShowAlert(false)}
          header={"EmailAddress or Password is incorrect."}
          buttons={[
            {
              text: "OK",
            }
          ]}
        />
      </IonContent>
    </IonPage>
  );
};

export default connect<OwnProps, {}, DispatchProps>({
  mapDispatchToProps: {
    setIsLoggedIn,
    setIsAdmin,
    setEmailAddress
  },
  component: Login
})

我主要关注中间件（API 开发）和后端。前端方面不多。如果我的问题没有正确表达，我深表歉意。

此外，如果我将状态设置为''请参阅以 (1) 开头的注释，我无法在输入字段中输入任何内容。

我用来设置 loginProps（loginInput.ts 文件）的界面是：

import React, { FC } from "react";
import { IonItem,  IonInput, IonLabel} from "@ionic/react";
import { Controller, Control } from "react-hook-form";

export interface LoginInputProps {
    name: string;
    control?: Control;
    label?: string;
    component?: JSX.Element;
}

const LoginInput: FC<LoginInputProps> = ({
    name,
    control,
    component,
    label
})=>{
   return (
       <>
       <IonItem>
           {label && (
               <IonLabel position="stacked">{label}</IonLabel>
           )}
           <Controller
              as={component ?? <IonInput />}
              name={name}
              control={control}
              onChangeName="onIonChange"
              /> 
              
       </IonItem>
       </>
   );
};

export default LoginInput;

4

1 回答 1

0

react-hook-form 已更新，您现在需要使用模式解析器

https://react-hook-form.com/get-started#SchemaValidation

  const { control, handleSubmit} = useForm({
     resolver: yupResolver(validationSchema),
  });
于 2020-11-01T18:15:30.850 回答