本文介绍了将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;更多推荐
将Formik与打字稿(离子)配合使用
发布评论