React Hook Form v7，每次我在字段上输入时都会发送 POST 请求

Question

我有一个表格，我想更新那里的值（API 请求：PUT "https://www.test.com/account/update"）。我正在使用 React Hook Form，如下所示：

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

问题是每次我在字段上键入时都会提交表单。我希望仅在单击提交按钮时才提交它。我在这里阅读了关于 useForm() 的文档：https://react-hook-form.com/api/useform 但我没有找到解决方案。我该如何更改？

提前致谢！

Answer 1

将 onClick 更改为 onSubmit。这样，当单击带有 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>
  );
};

React Hook Form v7，每次我在字段上输入时都会发送 POST 请求

React Hook Form v7, the POST request is sent every time I type on a field

javascript

reactjs

react-hook-form