英文:
Ionic React cannot select radio button after form error
问题
我有一个使用Ionic React和Yup进行验证动态构建的表单，这是基于来自API的信息完成的，但如果我在按下提交按钮时不选择单选按钮，单选按钮将变为不可点击，这意味着我永远无法去掉错误。
这里我创建了一个示例，其中包含一个硬编码的表单，而不是动态填充的表单，如果您在不进行任何操作的情况下点击"Save"，然后您将无法选择单选按钮，但我无法确定我的问题出在哪里。
import React, { useEffect } 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";
import "@ionic/react/css/core.css";
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";
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";
import "./theme/variables.css";
setupIonicReact();
const validationSchema = yup.object().shape({
q7: yup.string().required("selection is required")
});
export default function App() {
const {
register,
reset,
getValues,
handleSubmit,
control,
formState: { errors }
} = useForm({
resolver: yupResolver(validationSchema),
mode: "all"
});
const onSubmit = (data) => {
console.log(data);
};
return (
<>
<IonPage className="ion-page" id="main-content">
<IonContent className="ion-padding">
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<>
values: {getValues("name")}
<IonInput {...register("name")} />
error: {errors["q7"]?.message}
values: {getValues("q7")}
<Controller
control={control}
name="q7"
render={({ field: { onChange, value, ref } }) => (
<>
{console.log(value)}
<IonList>
<IonRadioGroup
ref={ref}
defaultValue=""
value={value ?? ""}
onIonChange={({ detail: { value } }) =>
onChange(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>
</>
);
}
这是您提供的代码的翻译部分。如果需要进一步的帮助，请随时提出。
<details>
<summary>英文:</summary>
I have a form which is dynamically built using Ionic React and Yup for validation, this is done based on information coming from an API but I have an issue if I do not select a radio button when I press submit the radio buttons become unclickable which means I can never get the error away.
I have created an example here with a hardcoded form rather than it being populated dynamically and if you click Save without doing anything you will then not be able to select the radio buttons but I can't workout where my issue is coming from.
[Link to example of my issue][1]
[1]: https://codesandbox.io/s/jolly-khayyam-9qbvuu?file=/src/App.tsx
Edit:
Here is the main section of code not working:
import React, { useEffect } 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,
reset,
getValues,
handleSubmit,
control,
formState: { errors }
} = useForm({
resolver: yupResolver(validationSchema),
mode: "all"
});
const onSubmit = (data: any) => {
console.log(data);
};
// useEffect(() => {
// reset({
// // q7: "6"
// });
// }, [reset]);
return (
<React.Fragment>
<IonPage className="xion-page" id="main-cntent">
<IonContent className="ion-padding">
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<>
values:{getValues("name")}
<IonInput {...register("name")}></IonInput>
error:{errors["q7"]?.message}
values:{getValues("q7")}
<Controller
control={control}
name="q7"
render={({ field: { onChange, value, ref } }) => (
<>
{console.log(value)}
<IonList>
<IonRadioGroup
ref={ref}
defaultValue=""
// allowEmptySelection={true}
value={value ?? ""}
onIonChange={({ detail: { value } }) =>
onChange(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>
);
}
</details>
# 答案1
**得分**: 0
你的问题是应该传递一个 onChange 函数的 JavaScript 事件。在 onIonChange 中修改事件并添加自定义属性。但实际上，你传递给函数的是一个值，而不是一个事件。
你可以在文档中找到标准的 JavaScript 事件在 onIonChange 中的位置，或者只需使用 setValue。
```jsx
<IonRadioGroup
{...field}
onIonChange={
(event) => {
setValue('q7', event.detail.value)
}
}
>
英文:
Your problem is that you should pass in onChange function js event.
In onIonChange modified event with custom properties.
But you actually passed a value to the function, not an event.
You can find in docks where is standard js event in onIonChange or just setValue
<IonRadioGroup
{...field}
onIonChange={
(event) => {
setValue('q7', event.detail.value)
}
}
>
https://codesandbox.io/s/crimson-breeze-d9fptl?file=/src/App.tsx:2253-2591
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论