Ionic React表单验证出错后无法选中单选按钮问题

问题分析 #

未选中单选按钮提交表单触发Yup必填验证后，单选按钮变得无法交互，核心原因是react-hook-form字段状态与IonRadioGroup的value绑定不同步：当验证失败时，q7字段值变为undefined，虽用value ?? ""处理，但Ionic RadioGroup在状态切换时的交互逻辑出现异常，导致无法触发选中事件。

解决方案 #

通过以下几点修改修复：

• 给react-hook-form设置q7的初始空值，避免字段状态为undefined
• 移除IonRadioGroup的defaultValue，由Controller统一管理状态
• 优化onIonChange的回调逻辑，确保值正确同步到表单状态

修改后的核心代码 #

import React from "react";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import {
  IonList,
  IonRadioGroup,
  IonItem,
  IonLabel,
  IonRadio,
  IonButton,
  IonContent,
  IonPage,
  setupIonicReact,
  IonInput
} from "@ionic/react";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";
setupIonicReact();

const validationSchema = yup.object().shape({
  q7: yup.string().required("selection is required")
});

export default function App() {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(validationSchema),
    mode: "all",
    defaultValues: { // 新增：设置q7初始空值
      q7: ""
    }
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <React.Fragment>
      <IonPage className="xion-page" id="main-cntent">
        <IonContent className="ion-padding">
          <div className="App">
            <form onSubmit={handleSubmit(onSubmit)}>
              values:{register("name").value}
              <IonInput {...register("name")}></IonInput>
              {errors.q7 && <span style={{color: 'red'}}>error:{errors.q7.message}</span>}
              values:{control._formValues.q7}
              <Controller
                control={control}
                name="q7"
                render={({ field: { onChange, value, ref } }) => (
                  <IonList>
                    <IonRadioGroup
                      ref={ref}
                      value={value} // 移除多余的?? ""，因为默认值已设为""
                      onIonChange={({ detail }) => onChange(detail.value)}
                    >
                      <IonItem>
                        <IonLabel>Type 2</IonLabel>
                        <IonRadio value="2" slot="start" />
                      </IonItem>
                      <IonItem>
                        <IonLabel>Type 4</IonLabel>
                        <IonRadio slot="start" value="4" />
                      </IonItem>
                      <IonItem>
                        <IonLabel>Type 6</IonLabel>
                        <IonRadio slot="start" value="6" />
                      </IonItem>
                    </IonRadioGroup>
                  </IonList>
                )}
              />
              <br />
              <IonButton type="submit">Save</IonButton>
            </form>
          </div>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
}

关键修改说明 #

1. 设置表单默认值：在useForm中添加defaultValues: { q7: "" }，确保q7字段初始状态为非空字符串，避免验证失败后变为undefined
2. 简化RadioGroup的value绑定：直接使用value而非value ?? ""，因为默认值已保证为空字符串，无需额外处理
3. 优化事件回调：onIonChange直接传递detail.value，逻辑更简洁，确保值正确同步到react-hook-form状态

内容的提问来源于stack exchange，提问作者Stephen E.