I have a form and I want to update the values there (API request: PUT "https://www.test.com/account/update") . I'm using React Hook Form, like following:

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>
  );
};

The problem is that the API request gets executed every time I type on a field. I want it to be executed only when I submit. I read the docs about useForm() here: https://react-hook-form.com/api/useform but I didn't found a solution. How can I change that?

Thank you in advance!

CodePudding user response：

Change onClick to onSubmit. That way form submit is triggered when button with type="submit" is clicked

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>
  );
};