react-hook-form Controller "as" 中的 Ionic React 错误

Question

我是 Ionic 新手。我通过 react-hook-form Controller 创建了一个简单的表单，它有一个 Title 和 Message 字段。以至于在"as"

中出现了错误

Find the Image Here

Error Message in CMD

import * as  React from "react";
import { IonCard, IonCardContent, IonCardHeader, IonContent, IonHeader, IonTextarea, IonInput, IonLabel, IonPage, IonItem, IonTitle, IonToolbar, IonButton } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
import { Controller, useForm } from "react-hook-form";

const Home: React.FC = () => {
  
  const initialValues = {
    title: "",
    body: ""
  }

  const { control, reset, handleSubmit, formState} = useForm({
    defaultValues: initialValues
  });

  const onSubmit = (data: any) => {
    alert(JSON.stringify(data, null, 2));
  }

  const resetForm = () => {
    reset(initialValues);
  }

  // const renderErrorMessage = (_key : string ) => {
  //   let theErrors = (errors as any)[_key];
  //   return <span>theErrors.message || "This Is A Required Field"</span>
  // } 
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle size="large">Form Test - React Hook Form</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonCard>
          <IonCardHeader>Test Input Form</IonCardHeader>
        </IonCard>

        <IonCardContent>
          <form onSubmit={handleSubmit(onSubmit)}>
            <IonItem>
              <IonLabel>Title</IonLabel>
              <Controller
                as = {IonInput}
                control={control}
                onChangeName="onIonChange"
                onChange={(selected:any) => {
                  return selected.detail.value;
                }}
                name="title"
                rules={{
                  required: true,
                  minLength: { value: 4, message: "Must be 4 chars long" }
                }}
              />
              
            </IonItem>
                {/* {errors.title ? renderErrorMessage("title") : null} */}
            <IonItem>
              <IonLabel>Body</IonLabel>
              <Controller
                as = {<IonTextarea rows={5}></IonTextarea>}
                control={control}
                onChangeName="onIonChange"
                onChange={(selected:any) => {
                  return selected.detail.value;
                }}
                name="body"
                rules={{
                  required: true,
                  minLength: { value: 10, message: "Must be 10 chars long" }
                }}
              />
              
            </IonItem>
            {/* {errors.body ? renderErrorMessage("body") : null} */}
            <IonButton type="submit">SAVE</IonButton>
            <IonButton onClick={() => resetForm()}>Reset Form</IonButton>
          </form>
        </IonCardContent>

      </IonContent>
    </IonPage>
  );
};

export default Home;

Visual Studio 代码在定义输入字段时在 Controller Tag 中的 as 关键字下方显示错误行。我已经安装了 react-hook-form 库

离子：

离子 CLI：6.18.1 离子框架：@ionic/react 6.0.1

电容器：

电容器 CLI：3.3.3 @capacitor/android : 未安装 @capacitor/core：3.3.3 @capacitor/ios : 未安装

效用：

cordova-res：未全局安装本机-运行：1.5.0

系统：

NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe) npm：8.1.2 OS : Windows 10

Answer 1

react-hook-form v7 中的 as props 已经被移除，这就是你得到这个错误。（假设您使用的是 v7）。您必须使用 render 属性。

控制器文档：https://react-hook-form.com/api/usecontroller/controller

react-hook-form Controller "as" 中的 Ionic React 错误

Ionic React error in "as" in react-hook-form Controller

reactjs

ionic-framework

react-hook-form