getValues

</> getValues: UseFormGetValues

폼 값을 읽기 위한 최적화된 헬퍼입니다. watch와 getValues의 차이점은 getValues가 리렌더링을 실행하거나 입력 변경을 구독하지 않는다는 것입니다.

매개변수

---

이름		타입	설명
fieldNames		undefined	전체 폼 값을 반환합니다.
		string	폼 값의 지정한 경로에서 값을 가져옵니다.
		string[]	폼 값의 지정한 경로에 있는 값의 배열을 반환합니다.
config	dirtyFields	boolean	v7.63.0부터 dirty 필드만 반환합니다.
	touchedFields	boolean	v7.63.0부터 touched 필드만 반환합니다.

예제:

---

아래 예제는 getValues 메서드를 호출했을 때 반환되는 값을 보여 줍니다.

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

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

이름	출력
getValues()	{ root: { test1: '', test2: ''} }
getValues("root")	{ test1: '', test2: ''}
getValues("root.test1")	''
getValues(["root.test1", "root.test2"])	['', '']
getValues(undefined, { dirtyFields: true })	{ root: { test1: '' } } — formState.dirtyFields에 있는 필드만 포함됩니다(예: test1을 편집한 후).
getValues(undefined, { touchedFields: true })	{ root: { test1: '' } } — formState.touchedFields에 있는 필드만 포함됩니다(예: test1에서 blur가 발생한 후).

규칙

• 최초 렌더링 전에는 defaultValues를 useForm에서 반환합니다.

예제:

---

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

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

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

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

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

// Flat input values
type Inputs = {
  key1: string
  key2: number
  key3: boolean
  key4: Date
}

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

  getValues()

  return <form />
}

// Nested input values
type Inputs1 = {
  key1: string
  key2: number
  key3: {
    key1: number
    key2: boolean
  }
  key4: string[]
}

export default function Form() {
  const { register, getValues } = useForm<Inputs1>()

  getValues()
  // function getValues(): Record<string, unknown>
  getValues("key1")
  // function getValues<"key1", unknown>(payload: "key1"): string
  getValues("key2")
  // function getValues<"key2", unknown>(payload: "key2"): number
  getValues("key3.key1")
  // function getValues<"key3.key1", unknown>(payload: "key3.key1"): unknown
  getValues<string, number>("key3.key1")
  // function getValues<string, number>(payload: string): number
  getValues<string, boolean>("key3.key2")
  // function getValues<string, boolean>(payload: string): boolean
  getValues("key4")
  // function getValues<"key4", unknown>(payload: "key4"): string[]

  return <form />
}