为什么 Formik 永远无法识别我的 Ionic IonInput 值？

Question

我正在使用 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

但是，即使我在其中输入了文本，单击“提交”总会导致显示错误消息。当我删除“validationSchema”属性时，我看到我的提交处理程序被调用，但是，即使我在其中输入了文本，这两个字段的值也始终为空。很好奇 Formik 是否适合与 React 一起使用。

Answer 1

是的，Formik 可以与 React 和 Ionic 一起使用来管理和验证表单状态。您在共享代码中遇到的问题与

onIonChange

组件处理

IonInput

事件的方式有关。

onIonChange

提供的事件对象与标准React

onChange

事件不同。结果，Formik 无法正确捕获更改，导致显示验证消息和提交表单时出错。

现在，要解决此问题，

onIonChange

事件处理程序应使用Formik的

setFieldValue

函数，该函数会在事件触发时手动更新字段值。此外，我还向

IonInput

组件添加了 name 属性。

<IonInput
  name='firstName'
  placeholder='First Name'
  value={formikProps.values.firstName}
  onIonChange={(e) => formikProps.setFieldValue('firstName', e.detail.value)}
/>
{formikProps.touched.firstName && formikProps.errors.firstName ? (
  <div>{formikProps.errors.firstName}</div>
) : null}
<IonInput
  name='lastName'
  placeholder='Last Name'
  value={formikProps.values.lastName}
  onIonChange={(e) => formikProps.setFieldValue('lastName', e.detail.value)}
/>
{formikProps.touched.lastName && formikProps.errors.lastName ? (
  <div>{formikProps.errors.lastName}</div>
) : null}

代码演示

建议：

您还应该考虑查看 React-hook-forms 库。它重量轻，正在慢慢取代Formik。