control

</> control: Control

이 객체에는 컴포넌트를 React Hook Form에 등록하는 메서드가 들어 있습니다. Controller, useController, useWatch, useFieldArray, useFormState, FormProvider에 전달하면 이 API들이 같은 폼 인스턴스에 연결됩니다. 컴포넌트가 이미 FormProvider 안에 있다면 선택 사항입니다.

규칙

중요: 이 객체의 속성에 직접 접근하지 마세요. 내부 용도로만 사용됩니다.

예시:

---

import { useForm, Controller } from "react-hook-form"
import { TextField } from "@mui/material"

type FormInputs = {
  firstName: string
}

function App() {
  const { control, handleSubmit } = useForm<FormInputs>()
  const onSubmit = (data: FormInputs) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        render={({ field }) => <input {...field} />}
        name="firstName"
        control={control}
        defaultValue=""
      />

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

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

function App() {
  const { control } = useForm()

  return (
    <Controller
      render={({ field }) => <input {...field} />}
      name="firstName"
      control={control}
      defaultValue=""
    />
  )
}