react-hook-form Controller "as" 中的 Ionic React 错误
Ionic React error in "as" in react-hook-form Controller
我是 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
react-hook-form v7 中的 as
props 已经被移除,这就是你得到这个错误。 (假设您使用的是 v7)。
您必须使用 render
属性。
控制器文档:https://react-hook-form.com/api/usecontroller/controller
我是 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
react-hook-form v7 中的 as
props 已经被移除,这就是你得到这个错误。 (假设您使用的是 v7)。
您必须使用 render
属性。
控制器文档:https://react-hook-form.com/api/usecontroller/controller