Reactjs 使用带有typescript的formik（离子型）

我尝试使用Formik库来验证表单，但在将onChange函数传递到输入组件时遇到了问题

以下是主要组成部分：

    import React from 'react';
import { IonHeader, IonContent, IonToolbar, IonTitle, IonButton, IonPage, IonList } from '@ionic/react';
import { useFormik } from 'formik';

import BasicInput from '../components/form/BasicInput';

const Login: React.FC = () => {

    const validate = (values: {
        name: string;
    }) => {
        const errors = {};
        if (!values.name) {

        }

        return errors;
    }

    const formik = useFormik({
        initialValues: {
            name: ''
        },
        validateOnChange: false,
        validateOnBlur: false,
        validate,
        onSubmit: values => {
            alert(JSON.stringify(values, null, 2));
        },
    })

    const {
        name
    } = formik.values

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Login</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent>
                <IonList>
                    <BasicInput
                        id="name"
                        placeholder={"Your name"}
                        onChange={formik.handleChange}
                    />

                </IonList>

                <div>
                    <IonButton onClick={handleLogin}>
                        Done
                    </IonButton>
                </div>
            </IonContent>
        </IonPage>
    )
     }

    export default Login;

    import React from 'react';
import { IonInput, IonItem } from '@ionic/react';

const BasicInput: React.FC<{
    id: string,
    placeholder: string,
    onChange: () => any
}> = (props) => {
    return (
        <IonItem>
            <IonInput
                placeholder={props.placeholder}
                onIonChange={props.onChange}
            >

            </IonInput>
        </IonItem>
    )
}

export default BasicInput;

从“React”导入React；
从'@ionic/react'导入{IonHeader、IonContent、IonToolbar、IonTitle、IonButton、IonPage、IonList}；
从'formik'导入{useFormik}；
从“../components/form/BasicInput”导入BasicInput；
常量登录：React.FC=（）=>{
const validate=（值：{
名称：字符串；
}) => {
常量错误={}；
如果（！values.name）{
}
返回错误；
}
常数formik=useFormik({
初始值：{
名称：“”
},
更改：错误，
模糊：错，
验证
onSubmit:values=>{
警报（JSON.stringify（值，null，2））；
},
})
常数{
名称
}=formik.values
返回(
登录
多恩
)
}
导出默认登录；

这是我的输入组件：

    import React from 'react';
import { IonHeader, IonContent, IonToolbar, IonTitle, IonButton, IonPage, IonList } from '@ionic/react';
import { useFormik } from 'formik';

import BasicInput from '../components/form/BasicInput';

const Login: React.FC = () => {

    const validate = (values: {
        name: string;
    }) => {
        const errors = {};
        if (!values.name) {

        }

        return errors;
    }

    const formik = useFormik({
        initialValues: {
            name: ''
        },
        validateOnChange: false,
        validateOnBlur: false,
        validate,
        onSubmit: values => {
            alert(JSON.stringify(values, null, 2));
        },
    })

    const {
        name
    } = formik.values

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Login</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent>
                <IonList>
                    <BasicInput
                        id="name"
                        placeholder={"Your name"}
                        onChange={formik.handleChange}
                    />

                </IonList>

                <div>
                    <IonButton onClick={handleLogin}>
                        Done
                    </IonButton>
                </div>
            </IonContent>
        </IonPage>
    )
     }

    export default Login;

    import React from 'react';
import { IonInput, IonItem } from '@ionic/react';

const BasicInput: React.FC<{
    id: string,
    placeholder: string,
    onChange: () => any
}> = (props) => {
    return (
        <IonItem>
            <IonInput
                placeholder={props.placeholder}
                onIonChange={props.onChange}
            >

            </IonInput>
        </IonItem>
    )
}

export default BasicInput;

从“React”导入React；
从'@ionic/react'导入{IonInput，IonItem}；
常量基本输入：React.FC any
}>=（道具）=>{
返回(
)
}
导出默认基本输入；

我获取的错误是“Type”（eventOrPath:string | ChangeEvent）=>void |（（eventOrTextValue:string | ChangeEvent）=>void）不可分配给onChange prop上的Type“（）=>any.”

---

如何正确地为TS声明它？

该消息指出了问题所在

在

BasicInput

中，您正在定义一个属性

onChange:（）=>any

。但是很明显，要调用的函数需要接收新的输入值作为参数，并且不需要返回任何内容，因此您的prop定义应该如下所示：

{
// ...
onChange：（newValue:string）=>void；
}

但是，如果将鼠标悬停在

的

onIonChange

属性上，您可以看到传递的函数没有接收字符串作为参数

这是完整的定义：

它实际上是在发射一枚炸弹。有了此事件

e

，您可以通过

e.target.value

访问输入值

完整代码如下所示：

从“React”导入React；
从'@ionic/react'导入{IonInput，IonItem}；
常量基本输入：React.FC void
}>=（道具）=>{
返回(
props.onChange（e.target.value）}
>
)
}
导出默认基本输入；

您可以将其定义为任意？？？@AaronSaunders我不是这样做的吗？如果不是的话，我在这一点上完全困惑了它的工作原理，但是我关闭了“strictNullChecks”，因为它与“e.details.value”有问题，谢谢：）很好！我建议不要关闭此标志，因为许多错误将无法防止。如果我理解正确，您可以使用新的可选链接功能：

e.details？.value

，并将onChange处理程序更改为接受未定义的值