ReactHookFormv7，每當我在一個欄位上輸入時，都會發送POST請求。

我有一個表單，我想更新那里的值（API請求：PUT "https://www.test.com/account/update"）。我正在使用React Hook Form，就像下面這樣：

span class="hljs-keyword">import { useForm } from "react-hook-form"/span>。 const { 控制。 注冊。 handleSubmit, formState: { errors }, getValues, setValue, } = useForm（{ mode: "onSubmit"/span>, }); const updateData = async ( ) => { const data = { firstName: getValues("firstName") 。 lastName: getValues("lastName") 。 }; axios.put("https://www.test.com/account/update"/span>, data, { headers: header }) .then((response) =>/span> { if (response.status == 201) { setFirstName(response.data.firstName) 。 setLastName(response.data.lastName) 。 return response.data。 } else { console.log（"error"）。 } }); }; return ( <React.Fragment>/span> <IonPage>/span> <IonContent>/span> <IonGrid>/span> <form onClick={handleSubmit（updateData）} > <IonItem> <IonLabel>/span>Firstname</IonLabel> <IonInput。 required value={firstName} {...register("firstName")} </IonInput>> </IonItem>/span> <IonItem>/span> <IonLabel>最后一個名字</IonLabel> <IonInput。 required value={lastName} {...register("lastName") } </IonInput>> </IonItem>/span> <IonButton type="submit"。 > 儲存 </IonButton>保存 </form>/span> </IonGrid>/span> </IonContent>/span> </IonPage>/span> </React.Fragment> ); };

問題是，每次我在一個欄位上輸入API請求都會被執行。我希望它只在我提交時被執行。我在這里閱讀了關于useForm()的檔案。https://react-hook-form.com/api/useform但我沒有找到解決辦法。 我怎樣才能改變這一點呢？

預先感謝你！

uj5u.com熱心網友回復：

將onClick改為onSubmit。這樣，當帶有type="submit"的按鈕被點擊時，表單提交就被觸發了

import { useForm } from "react-hook-form"/span>。

const {
    控制。
    注冊。
    handleSubmit,
    formState: { errors },
    getValues,
    setValue,
  } = useForm（{
    mode: "onSubmit"/span>,
  });

const updateData = async ( ) => {
    const data = {
      firstName: getValues("firstName") 。
      lastName: getValues("lastName") 。
    };

    axios.put("https://www.test.com/account/update"/span>, data, { headers: header })
   .then((response) =>/span> {
      if (response.status == 201) {
        setFirstName(response.data.firstName) 。
        setLastName(response.data.lastName) 。
        return response.data。
      } else {
        console.log（"error"）。
      }
    });
  };

return (
    <React.Fragment>/span>
      <IonPage>/span>
        <IonContent>/span>
          <IonGrid>/span>
                <form 
                  {/* onClick={handleSubmit(updateData)} */} */}
                  onSubmit={handleSubmit(updateData)} */}
                >
                  <IonItem> 
                    <IonLabel>/span>Firstname</IonLabel>
                    <IonInput。
                      required
                      value={firstName}
                      {...register("firstName")}
                    </IonInput>>
                  </IonItem>/span>
                  <IonItem>/span>
                    <IonLabel>最后一個名字</IonLabel>
                    <IonInput。
                      required
                      value={lastName}
                      {...register("lastName") }
                    </IonInput>>
                  </IonItem>/span>
                 
                  <IonButton
                    type="submit"。
                  >
                    儲存
                  </IonButton>保存
                </form>/span>
          </IonGrid>/span>
        </IonContent>/span>
      </IonPage>/span>
    </React.Fragment> 
  );
};

標籤：

上一篇：反應應用程式的構建版本給出了錯誤的CSS和JS檔案鏈接

下一篇：在Java中向一個集合添加整數值