コンテンツにスキップする

handleSubmit

サーバーに送信する準備ができました

</> handleSubmit: ((data: Object, e?: Event) => Promise<void>, (errors: Object, e?: Event) => Promise<void>) => Promise<void>

この関数はフォームのバリデーションが成功した場合、フォームのデータを受け取ります。

プロパティ

名前型説明
SubmitHandler(data: Object, e?: Event) => Promise<void>成功時のコールバック。
SubmitErrorHandler(errors: Object, e?: Event) => Promise<void>エラー時のコールバック。
ルール

  • handleSubmitを使用して、簡単にフォームを非同期で送信できます。

    handleSubmit(onSubmit)()
    

    // You can pass an async function for asynchronous validation.
    handleSubmit(async (data) => await fetchAPI(data))

  • disabledインプットは、フォーム値ではundefined値として表示されます。ユーザーが入力内容の更新を防止し、フォーム値を維持したい場合は、readOnlyを使用するか、または<fieldset />全体を無効にすることができます。 例を次に示します。

  • handleSubmit関数は、onSubmitコールバック内で発生したエラーを無視しないので、非同期リクエスト内でエラーを処理し、エラーを適切に処理してユーザーに伝えることをお勧めします。

    const onSubmit = async () => {
      // async request which may result error
      try {
        // await fetch()
      } catch (e) {
        // handle your error
      }
    };
    

    <form onSubmit={handleSubmit(onSubmit)} />

例

同期

CodeSandbox TS
import React from "react"
import { useForm, SubmitHandler } from "react-hook-form"


type FormValues = {
  firstName: string
  lastName: string
  email: string
}


export default function App() {
  const { register, handleSubmit } = useForm<FormValues>()
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="email" {...register("email")} />


      <input type="submit" />
    </form>
  )
}
CodeSandbox JS
import { useForm } from "react-hook-form"


export default function App() {
  const { register, handleSubmit } = useForm()
  const onSubmit = (data, e) => console.log(data, e)
  const onError = (errors, e) => console.log(errors, e)


  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit">Submit</button>
    </form>
  )
}

非同期

CodeSandbox JS
import React from "react";
import { useForm } from "react-hook-form";


const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));


function App() {
  const { register, handleSubmit, formState: { errors }, formState } = useForm();
  const onSubmit = async data => {
    await sleep(2000);
    if (data.username === "bill") {
      alert(JSON.stringify(data));
    } else {
      alert("There is an error");
    }
  };


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">User Name</label>
      <input placeholder="Bill" {...register("username"} />


      <input type="submit" />
    </form>
  );
}

動画

以下の動画チュートリアルでは、handleSubmitAPIについて詳しく説明します。

ご支援ありがとうございます

React Hook Formがプロジェクトに役立つと感じた場合は、スターを付け、サポートをお願いします。