Open4

react-hook-formでフォームの構築

nabetsunabetsu

公式Get Startedのサンプル

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

type Inputs = {
  example: string
  exampleRequired: string
}

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

  console.log(watch("example")) // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />

      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}

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

基本の使い方

useFormのHooksを使って取得したregisterとhandleSubmitを使う。watchとformStateは必須ではない。

  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>()

以下のように{...register}をinput要素で呼ぶことで、入力された値を記録できるようになる。
handleSubmitをかましてonSubmitやonClickなどのフォーム入力時に呼びたい関数を呼ぶ。

  const {
    register,
    handleSubmit,
  } = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("example")} />
      <input {...register("exampleRequired")} />
      <input type="submit" />
    </form>
  )
nabetsunabetsu

初期値の設定

useFormでdefaultValuesを設定するか、inputで直接定義することで初期値を設定できる

  # useFormで定義
  const {
    register,
    handleSubmit,
  } = useForm<Inputs>({
    defaultValues: {
      title: "title",
      description: "description",
    }
})
      ...
      # inputに直接定義
      <input defaultValue="test" {...register("example")} />
nabetsunabetsu

Validation

registerでvalidationの定義をすることで、handleSubmit押下時にValidationを行うことができる。

      <input {...register("exampleRequired", { required: true })} />

validationの結果に応じて表示を変更をする場合などはerrorの状態を保持するためformStateの定義をまず行う。
formStateで定義したerrorsの値に応じてValidationErrorの内容などのUIを出し分けすればOK

export default function App() {
  const {
    ...
    formState: { errors },
  } = useForm<Inputs>()
      ...
      <input {...register("exampleRequired", { required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}