在React+Formik中如何正确处理IonRadioGroup的change事件？

核心修复方案 #

不要直接给<IonRadioGroup>设置value属性，改为给每个<IonRadio>单独绑定checked属性，配合Formik的状态值控制选中状态，同时保留onIonChange触发setFieldValue更新Formik状态。

修复后的代码示例 #

<IonItemGroup>
  <IonItemDivider>Type</IonItemDivider>
  <IonRadioGroup
    name="type"
    onIonChange={(e) => formik.setFieldValue("type", e.detail.value)}
  >
    <IonItem>
      <IonLabel>Percentage</IonLabel>
      <IonRadio 
        slot="end" 
        value="percentage" 
        checked={formik.values.type === "percentage"} 
      />
    </IonItem>
    <IonItem>
      <IonLabel>Fixed</IonLabel>
      <IonRadio 
        slot="end" 
        value="fixed" 
        checked={formik.values.type === "fixed"} 
      />
    </IonItem>
  </IonRadioGroup>
</IonItemGroup>

原因解释 #

1. IonRadioGroup的value属性冲突：当给<IonRadioGroup>设置value={formik.values.type}时，组件会进入Ionic内部的受控模式，维护自身的选中状态。Formik更新状态触发重渲染时，IonRadioGroup会用新值重新初始化，导致onIonChange被重复触发，最终状态同步失败。
2. 直接控制单个IonRadio的checked：这种方式绕过了IonRadioGroup的内部状态管理，完全由Formik状态驱动选中状态，避免了双状态同步的冲突，既能正确加载默认值，又能正常响应选择更新。
3. 关于formik.handleChange无效：Ionic的onIonChange事件返回自定义事件对象（e.detail.value），而Formik的handleChange是基于标准HTML表单事件（e.target.value）设计的，无法直接识别，因此必须用setFieldValue手动指定字段更新。

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