反應鉤形式控制器中“as”中的離子反應錯誤

我是 Ionic 的新手。我創建了一個簡單的表單，它通過 react-hook-form Controller 有一個 Title 和 Message 欄位。所以在“as”中發生了錯誤

在這里找到影像

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 Code 在定義輸入欄位時在 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 作業系統：Windows 10

uj5u.com熱心網友回復：

該as道具已經在去除反應鉤形式V7，這就是你得到這個錯誤。（假設您使用的是 v7）。你必須使用render道具。

???? 控制器檔案：https ://react-hook-form.com/api/usecontroller/controller

標籤：反应 离子框架 反应钩形

上一篇：如何在ionic5中使文本輸入中的圖示可點擊

下一篇：IonicReact：點擊FCM通知時useHistory().push()不起作用