我正在使用Ionic 7，React 18和Formik 2.4.5。Ionic可以与Formik一起使用吗？我尝试创建一个非常简单的表单，只有名字和姓氏。
const MyComponent: React.FC<MyComponentProps> = ({ }) => {
const validationSchema = Yup.object({
firstName: Yup.string().required('First Name is required'),
lastName: Yup.string().required('Last Name is required')
// Add other fields to validate here
})
return (
<Formik
initialValues={{
firstName: null,
lastName: null
}}
validationSchema={validationSchema}
onSubmit={(values) => {
alert(JSON.stringify(values, null, 2))
}}
>
{(formikProps) => (
<>
<strong>Sender Information</strong>
<form onSubmit={formikProps.handleSubmit}>
<IonInput placeholder='First Name' value={formikProps.values.firstName} onIonChange={formikProps.handleChange} />
{formikProps.touched.firstName && formikProps.errors.firstName ? <div>{formikProps.errors.firstName}</div> : null}
<IonInput placeholder='Last Name' value={formikProps.values.lastName} onIonChange={formikProps.handleChange} />
{formikProps.touched.lastName && formikProps.errors.lastName ? <div>{formikProps.errors.lastName}</div> : null}
<button type='submit'>Submit</button>
</form>
</>
)}
</Formik>
)
}
export default MyComponent字符串
然而，点击“Submit”总是会显示错误消息，即使我已经在其中输入了文本。当我删除“validationSchema”属性时，我看到我的提交处理程序被调用，然而，这两个字段的值总是空的，即使我已经在其中输入了文本。我很好奇Formik是否是一种可以与React一起使用的东西。
1条答案
按热度按时间nsc4cvqm1#
是的，Formik可以与React和Ionic一起使用来管理和验证表单状态。根据代码，您面临的问题与
IonInput组件处理onIonChange事件的方式有关。onIonChange提供的事件对象与标准ReactonChange事件不同。因此，Formik无法正确捕获更改，从而导致在显示验证消息和提交表单时出错。现在，为了修复这个问题，
onIonChange事件处理程序应该使用Formik的 *setFieldValue* 函数，该函数在事件被触发时手动更新字段值。此外，我向IonInput组件添加了name属性。字符串
建议：
你应该考虑看看 React-hook-forms 库。它是轻量级的，与Ionic，React兼容。
参考资料：