Tengo un formulario y quiero actualizar los valores allí (solicitud de API: PUT "https://www.test.com/account/update" ). Estoy usando React Hook Form, como sigue:
import { useForm } from "react-hook-form"; const { control, register, handleSubmit, formState: { errors }, getValues, setValue, } = useForm({ mode: "onSubmit", }); const updateData = async () => { const data = { firstName: getValues("firstName"), lastName: getValues("lastName"), }; axios.put("https://www.test.com/account/update", data, { headers: header }) .then((response) => { if (response.status == 201) { setFirstName(response.data.firstName); setLastName(response.data.lastName); return response.data; } else { console.log("error"); } }); }; return ( <React.Fragment> <IonPage> <IonContent> <IonGrid> <form onClick={handleSubmit(updateData)} > <IonItem> <IonLabel>Firstname</IonLabel> <IonInput required value={firstName} {...register("firstName")} ></IonInput> </IonItem> <IonItem> <IonLabel>Lastname</IonLabel> <IonInput required value={lastName} {...register("lastName")} ></IonInput> </IonItem> <IonButton type="submit" > Save </IonButton> </form> </IonGrid> </IonContent> </IonPage> </React.Fragment> ); }; El problema es que el formulario se envía cada vez que escribo en un campo . Quiero que se envíe solo cuando haga clic en el botón Enviar. Leí los documentos sobre useForm() aquí: https://react-hook-form.com/api/useform pero no encontré una solución. ¿Cómo puedo cambiar eso?
¡Gracias de antemano!
Cambie onClick a onSubmit . De esa manera, el envío del formulario se activa cuando se hace clic en el botón con type="submit"
import { useForm } from "react-hook-form"; const { control, register, handleSubmit, formState: { errors }, getValues, setValue, } = useForm({ mode: "onSubmit", }); const updateData = async () => { const data = { firstName: getValues("firstName"), lastName: getValues("lastName"), }; axios.put("https://www.test.com/account/update", data, { headers: header }) .then((response) => { if (response.status == 201) { setFirstName(response.data.firstName); setLastName(response.data.lastName); return response.data; } else { console.log("error"); } }); }; return ( <React.Fragment> <IonPage> <IonContent> <IonGrid> <form {/* onClick={handleSubmit(updateData)} */} onSubmit={handleSubmit(updateData)} > <IonItem> <IonLabel>Firstname</IonLabel> <IonInput required value={firstName} {...register("firstName")} ></IonInput> </IonItem> <IonItem> <IonLabel>Lastname</IonLabel> <IonInput required value={lastName} {...register("lastName")} ></IonInput> </IonItem> <IonButton type="submit" > Save </IonButton> </form> </IonGrid> </IonContent> </IonPage> </React.Fragment> ); };