0

尝试在 Ionic React 项目中使用 IonInput。

<IonInput { ...props } { ...register(props.name, { required, ...requiredOptions }) } />

完整代码：

const { register, handleSubmit, formState: { errors } } = useForm({
        
        mode: "onTouched",
        reValidateMode: "onChange"
    });

    const fields = [
        {
            label: "Firstname",
            required: true,
            requiredOptions: {

                maxLength: 10
            },
            props: {
                
                name: "firstname",
                type: "text",
                placeholder: "Enter a username"
            }
        },

        {
            label: "Age",
            required: true,
            requiredOptions: {

                min: 18,
                max: 99
            },
            props: {
                
                name: "age",
                type: "number",
                inputmode: "numeric",
                placeholder: "Enter your age"
            }
        }
    ];

    console.log(errors);
    
    const onSubmit = (data : any) => {
        
        console.log(data);
    }

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>React Hook Form</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <IonHeader collapse="condense">
                    <IonToolbar>
                        <IonTitle size="large">React Hook Form</IonTitle>
                    </IonToolbar>
                </IonHeader>

                <IonCardSubtitle className="ion-text-center ion-margin">An example using React Hook Form</IonCardSubtitle>

                <form onSubmit={ handleSubmit(onSubmit) }>

                    { fields.map((field, index) => {

                        const { label, required, requiredOptions, props } = field;

                        return (
                            <IonItem key={ `form_field_${ index }` } lines="full">

                                <>
                                    <IonLabel position="fixed">{ label }</IonLabel>
                                    <IonInput { ...props } { ...register(props.name, { required, ...requiredOptions }) } />
                                </>
                                { required && errors[props.name] && <IonIcon icon={ alertCircleOutline } color="danger" /> }
                            </IonItem>
                        );
                    })}

                    <IonButton type="submit" className="ion-margin-top" expand="full">Submit</IonButton>
                </form>
            </IonContent>
        </IonPage>
        );

IonInput会得到这个错误：

类型'{ onChange：ChangeHandler; onBlur：更改处理程序；参考：RefCallBack；名称：字符串；min?: 字符串 | 号码 | 不明确的; 最大？：字符串 | 号码 | 不明确的; ... 7 更多 ...; 输入模式？：未定义；} | { ...; }' 不可分配给类型 'IntrinsicAttributes & IonInput & Pick<HTMLAttributes, "onBlur" | "onChange" | ... 250 更多 ... | "onTransitionEndCapture"> & StyleReactProps & RefAttributes<...>'。类型'{ onChange：ChangeHandler; onBlur：更改处理程序；参考：RefCallBack；名称：字符串；min?: 字符串 | 号码 | 不明确的; 最大？：字符串 | 号码 | 不明确的; ... 7 更多 ...; 输入模式？：未定义；}' 不可分配给类型 'IonInput'。属性“max”的类型不兼容。键入'字符串 | 号码 | 不明确的' 不能分配给类型 'string | 不明确的'。类型 'number' 不可分配给类型 'string | 不明确的'。

我的依赖：

  • @ionic/react": "^6.0.0"
  • 反应钩形”：“^7.27.0”

我通过互联网做了一些研究，但没有得到解决。有人可以帮忙吗？此外，还有其他适合离子项目的表单框架吗？谢谢！！

4

0 回答 0