Form

</> Form: FormProps v7.44.0부터

참고: 이 컴포넌트는 현재 BETA입니다.

이 컴포넌트는 선택 사항이며 표준 네이티브 폼과 유사한 방식으로 폼 제출을 처리합니다.

기본적으로 폼 제출 데이터를 FormData로 담아 POST 요청을 보냅니다. JSON으로 보내려면 encType 또는 Content-Type 헤더(headers prop으로 지정)를 application/json으로 설정하세요.

• 폼의 점진적 향상을 지원합니다.
• React Web과 React Native를 모두 지원합니다.
• 폼 제출 처리를 담당합니다.

<Form
  action="/api"
  method="post" // default to post
  onSubmit={() => {}} // function to be called before the request
  onSuccess={() => {}} // valid response
  onError={() => {}} // error response
  validateStatus={(status) => status >= 200} // validate status code
/>

Props(속성)

---

모든 prop은 선택 사항입니다.

이름	타입	설명	예시
control	Control	control 객체이며 useForm을 호출해 얻습니다. FormProvider를 사용하면 선택 사항입니다.	<Form control={control} />
action	string | (formData: FormData) => unknown	제출할 URL 또는 v7.84.0부터 제출할 FormData와 함께 호출되는 함수(Server Action 방식)입니다.	<Form action={async (formData) => { 'use server'; await save(formData) }} />
method	"post" | "put" | "delete"	action이 URL 문자열일 때 사용하는 HTTP 메서드입니다. 제출 데이터가 요청 본문으로 전송되므로 GET은 지원하지 않습니다. 기본값은 post입니다.	<Form method='post' />
encType	"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | "application/json"	요청의 Content-Type을 설정합니다. 기본적으로 제출 데이터는 FormData로 전송됩니다. JSON으로 보내려면 이 값(또는 headers prop)을 application/json으로 설정하세요.	<Form encType='application/json' />
children	React.ReactNode	폼 내용입니다.	<Form>{children}</Form>
render	Function	헤드리스 컴포넌트에 적합한 렌더 prop 함수입니다.	<Form render={({ submit }) => <View/>} />
onSubmit	Function	검증에 성공한 후 호출되는 함수입니다.	<Form onSubmit={({ data }) => mutation(data)} />
onSuccess	Function	서버 요청에 성공한 후 호출되는 함수입니다.	<Form onSuccess={({ response }) => {}} />
onError	Function	서버 요청에 실패한 후 호출되는 함수입니다. 오류 상태를 업데이트하기 위해 setError 함수가 호출되며 root.server가 오류 키로 사용됩니다.	<Form onError={({ response }) => {}} />
headers	Record<string, string>	요청 헤더 객체입니다.	<Form headers={{ accessToken: 'xxx', 'Content-Type': 'application/json' }} />
validateStatus	(status: number) => boolean	상태 코드를 검증하는 함수입니다.	<Form validateStatus={status => status === 200} />

규칙

• 제출 데이터를 가공하거나 제외하려면 handleSubmit 또는 onSubmit을 사용하세요.

  const { handleSubmit, control } = useForm();
  const onSubmit =(data) => callback(prepareData(data))
  <form onSubmit={handleSubmit(onSubmit)} />
  // or
  <Form
    onSubmit={({ data }) => {
      console.log(data)
    }}
  />

• 점진적 향상은 SSR 프레임워크에만 적용됩니다.

  const { handleSubmit, control } = useForm({
    progressive: true
  });
  
  <Form onSubmit={onSubmit} control={control} action="/api/test" method="post">
    <input {...register("test", { required: true })} />
  </Form>
  
  // Renders
  
  <form action="/api/test" method="post">
    <input required name="test" />
  </form>

예시:

---

React Web

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

function App() {
  const {
    control,
    register,
    formState: { isSubmitSuccessful, errors },
  } = useForm({
    // progressive: true, optional prop for progressive enhancement
  })

  return (
    <div>
      {/* Use action prop to make post submission with formData */}
      <Form
        action="/api"
        control={control}
        onSuccess={() => {
          alert("Success")
        }}
        onError={() => {
          alert("error")
        }}
      >
        <input {...register("name")} />
        {isSubmitSuccessful && <p>Form submit successful.</p>}
        {errors?.root?.server && <p>Form submit failed.</p>}
        <button>submit</button>
      </Form>
      {/* Manual form submission */}
      <Form
        onSubmit={async ({ formData, data, formDataJson, event }) => {
          await fetch("api", {
            method: "post",
            body: formData,
          })
        }}
      >
        <input {...register("test")} /> <button>submit</button>
      </Form>
    </div>
  )
}

React Native

import { useForm, Form } from "react-hook-form"
function App() {
  const {
    control,
    register,
    formState: { isSubmitSuccessful, errors },
  } = useForm()
  return (
    <Form
      action="/api"
      control={control}
      render={({ submit }) => (
        <View>
          {isSubmitSuccessful && <Text>Form submit successful.</Text>}

          {errors?.root?.server && <Text>Form submit failed.</Text>}
          <Button onPress={() => submit()} />
        </View>
      )}
    />
  )
}