Ionic 7+React 18中Formik无法识别IonInput值的问题

Ionic 7和Formik 2.4.5完全兼容React 18技术栈，你的问题是表单事件处理和初始值设置的细节问题，并非兼容性问题，下面是具体修正方案：

问题根源 #

1. 初始值类型错误：你给firstName和lastName设置的初始值是null，而Yup的string()验证器会将null判定为非有效字符串，即便输入内容后，也可能因为初始类型不匹配导致验证逻辑异常。
2. IonInput事件不匹配Formik默认处理：Ionic的onIonChange触发的是自定义事件，值存储在event.detail.value中，但Formik的handleChange默认读取event.target.value，直接绑定会导致Formik无法获取输入值。
3. 缺少触摸状态更新：没有绑定onIonBlur触发Formik的handleBlur，导致touched状态无法更新，错误提示的显示逻辑也会失效。

修正后的代码 #

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')
  })

  return (
    <Formik
      initialValues={{
        // 初始值改为空字符串，匹配Yup的string类型验证
        firstName: '',
        lastName: ''
      }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2))
      }}
    >
      {(formikProps) => (
        <>
          <strong>Sender Information</strong>

          <form onSubmit={formikProps.handleSubmit}>
            {/* 处理IonInput的change事件，手动传递值给Formik的handleChange */}
            <IonInput 
              placeholder='First Name' 
              value={formikProps.values.firstName} 
              onIonChange={(e) => formikProps.handleChange('firstName')(e.detail.value)}
              onIonBlur={formikProps.handleBlur('firstName')}
            />
            {formikProps.touched.firstName && formikProps.errors.firstName ? <div>{formikProps.errors.firstName}</div> : null}
            
            <IonInput 
              placeholder='Last Name' 
              value={formikProps.values.lastName} 
              onIonChange={(e) => formikProps.handleChange('lastName')(e.detail.value)}
              onIonBlur={formikProps.handleBlur('lastName')}
            />
            {formikProps.touched.lastName && formikProps.errors.lastName ? <div>{formikProps.errors.lastName}</div> : null}

            <button type='submit'>Submit</button>
          </form>
        </>
      )}
    </Formik>
  )
}

export default MyComponent

关键修改说明 #

• 将初始值从null改为''，确保和Yup的string()验证器类型匹配；
• 重写onIonChange事件：通过formikProps.handleChange('字段名')(e.detail.value)手动将Ionic输入的值传递给Formik；
• 添加onIonBlur={formikProps.handleBlur('字段名')}，触发Formik更新字段的touched状态，让错误提示逻辑正常工作。

内容的提问来源于stack exchange，提问作者Dave