将Formik与打字稿(离子)配合使用

本文介绍了将Formik与打字稿(离子)配合使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

以下是主要组件：

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; 错误信息获取为"Type‘(eventOrPath：字符串|ChangeEvent)=>void|((ventOrTextValue：String|ChangeEvent)=>void)’不可分配给类型‘()=>any’。"在我的onChange道具上。

如何为TS正确声明它？

推荐答案

该消息指出问题所在。

在BasicInput中，您正在定义道具onChange: () => any。但是很明显，将要调用的函数将需要接收新的输入值作为参数，并且不需要返回任何内容，因此您的属性定义应该是这样的：

{ // ... onChange: (newValue: string) => void; }

但是，如果您将鼠标悬停在<IonInput />的onIonChange道具上，您可以看到传递的函数没有将字符串作为参数接收！

这是完整的定义：github/ionic-team/ionic/blob/976e68da5b030baf26dc60034ff80d8db2cff8e6/core/src/components.d.ts#L4137

它实际上会触发一个CustomEvent。有了此事件e，您可以通过e.target.value访问输入值。

完整代码如下：

import React from 'react'; import { IonInput, IonItem } from '@ionic/react'; const BasicInput: React.FC<{ id: string, placeholder: string, onChange: (newValue: string) => void }> = (props) => { return ( <IonItem> <IonInput placeholder={props.placeholder} onIonChange={(e) => props.onChange(e.target.value)} > </IonInput> </IonItem> ) } export default BasicInput;