我正在开发一个Ionic React应用程序,我想使用React Hook Form和Yup Resolvers来提交表单。我的表单包含一个单选按钮和两个其他输入。
我在使用单选按钮时遇到了困难。我应该如何编写它以存储其值并提交?下面是我的组件。即使我选择了其中一个单选按钮,也没有存储任何值。
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
const validationSchema = yup.object().shape({
firstName: yup.string().required("First name is required"),
lastName: yup.string().required("Last name is required"),
});
const AddUser = () => {
const history = useHistory();
const [type, seType] = useState("");
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const {
register,
handleSubmit,
formState: { errors },
getValues,
} = useForm({
mode: "onChange",
resolver: yupResolver(validationSchema),
});
const onSubmit= () => {
var data = {
type: getValues("type"),
firstName: getValues("firstName"),
lastName: getValues("lastName"),
};
axios
.post("/add-user", data)
.then((response) => {
return response.data;
})
.catch((error) => {
setMessage(
`You are already registered`
);
setIserror(true);
});
};
return (
<React.Fragment>
<IonPage className="ion-page" id="main-content">
<IonContent className="ion-padding">
<div>
<h2>Add New User</h2>
<form onSubmit={handleSubmit(onSubmit)}>
<IonList>
<IonRadioGroup
{...register("type")}
>
<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>
<IonItem>
<IonLabel position="floating">First name*</IonLabel>
<IonInput
{...register("firstName")}
></IonInput>
</IonItem>
<IonItem>
<IonLabel position="floating">Last name*</IonLabel>
<IonInput
{...register("lastName")}
></IonInput>
</IonItem>
<br />
<IonButton
type='submit'
>
create
</IonButton>
</form>
</div>
</IonContent>
</IonPage>
</React.Fragment>
);
};
export default AddUser;
package.json
"@hookform/resolvers": "^2.4.0",
"react-hook-form": "^7.1.1",
"yup": "^0.32.9"
任何帮助都将非常感激!
2条答案
按热度按时间wdebmtf21#
您需要使用
Controller
而不是register
来 Package<IonRadioGroup>
,因为register
只适用于像<IonInput />
这样的简单离子组件。我还删除了
onSubmit
方法中的getValues
调用,因为该函数的第一个参数已经提供了所有注册的表单值。jjjwad0x2#
您可以避免将控制器与以下各项配合使用:
参见:https://react-hook-form.com/api/useform/register/#example