</> `getValues:` `(payload?: string | string[]) => Object`

フォームの値を読み取るための最適化されたヘルパーです。watch と getValues の違いは、getValues は再レンダリングをトリガーしたり、入力の変更をサブスクライブしたりしないことです。

プロパティ

型	説明
`未定義`	フォームの値全体を返します。
`文字列`	フォームの値のパスにある値を取得します。
`配列`	フォームの値のパスにある値の配列を返します。

例

以下の例では、getValues メソッドを呼び出したときに期待される内容を示しています。

<input {...register("root.test1")} />

<input {...register("root.test2")} />

名前	出力
`getValues()`	`{ root: { test1: '', test2: ''} }`
`getValues("root")`	`{ test1: '', test2: ''}`
`getValues("root.firstName")`	`''`
`getValues(["yourDetails.lastName"])`	`['']`

ルール

無効化された入力は undefined として返されます。ユーザーが入力を更新できないようにし、フィールド値を保持したい場合は、readOnly を使用するか、<fieldset /> 全体を無効化できます。こちらに例があります。
初期レンダリングの前に useForm から defaultValues を返します。

例

CodeSandbox ^TS

import React from "react"
import { useForm } from "react-hook-form"

type FormInputs = {
  test: string
  test1: string
}

export default function App() {
  const { register, getValues } = useForm<FormInputs>()

  return (
    <form>
      <input {...register("test")} />
      <input {...register("test1")} />

      <button
        type="button"
        onClick={() => {
          const values = getValues() // { test: "test-input", test1: "test1-input" }
          const singleValue = getValues("test") // "test-input"
          const multipleValues = getValues(["test", "test1"]) // ["test-input", "test1-input"]
        }}
      >
        Get Values
      </button>
    </form>
  )
}

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

もしあなたのプロジェクトで React Hook Form が役立つと感じたら、スターをつけたり、応援することを検討してください。

getValues

</> getValues: (payload?: string | string[]) => Object

プロパティ

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

</> `getValues:` `(payload?: string | string[]) => Object`