</> `Form:` Component

참고: 이 컴포넌트는 현재 베타 버전입니다.

이 컴포넌트는 선택 사항이며, 표준 네이티브 폼과 밀접하게 연동하여 폼 제출을 처리합니다.

기본적으로 폼 제출 데이터를 FormData로 POST 요청을 보냅니다. headers prop을 제공하면 FormData 대신 application/json을 사용할 수 있습니다.

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

<Form
  action="/api"
  method="post" // 기본값은 post
  onSubmit={() => {}} // 요청 전에 호출될 함수
  onSuccess={() => {}} // 유효한 응답 시 호출
  onError={() => {}} // 오류 응답 시 호출
  validateStatus={(status) => status >= 200} // 상태 코드 검증
/>

Props

모든 props는 선택 사항입니다.

이름	타입	설명	예시
`control`	`Control`	`useForm`을 호출하여 제공되는 `control` 객체. `FormProvider`를 사용할 때는 선택 사항입니다.	<Form control={control} />
`children`	`React.ReactNode`
`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)} />
// 또는
<Form
  onSubmit={({ data }) => {
    console.log(data)
  }}
/>

점진적 향상(Progressive Enhancement)은 SSR 프레임워크에서만 적용 가능합니다.

const { handleSubmit, control } = useForm({
  progressive: true
});

<Form onSubmit={onSubmit} control={control} action="/api/test" method="post">
  <input {...register("test", { required: true })} />
</Form>

// 렌더링 결과

<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, 점진적 향상을 위한 선택적 prop
  })

  return (
    <div>
      // action prop을 사용하여 formData로 POST 제출
      <Form
        action="/api"
        control={control}
        onSuccess={() => {
          alert("성공")
        }}
        onError={() => {
          alert("에러")
        }}
      >
        {" "}
        <input {...register("name")} />
        {isSubmitSuccessful && <p>폼 제출 성공.</p>}
        {errors?.root?.server && <p>폼 제출 실패.</p>}
        <button>제출</button>
      </Form>
      // 수동 폼 제출
      <Form
        onSubmit={async ({ formData, data, formDataJson, event }) => {
          await fetch("api", {
            method: "post",

            body: formData,
          })
        }}
      >
        {" "}
        <input {...register("test")} /> <button>제출</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>폼 제출 성공.</Text>}

          {errors?.root?.server && <Text>폼 제출 실패.</Text>}
          <Button onPress={() => submit()} />
        </View>
      }}
    />
  )
}

여러분의 지원에 감사드립니다

React Hook Form이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.

Form

</> Form: Component

Props

여러분의 지원에 감사드립니다

</> `Form:` Component