</> `Form:` Component

Note: 이 component는 현재 BETA입니다.

이 component는 선택 사항이며 표준 native 폼과 유사하게 폼 submission을 처리합니다.

기본적으로, 폼 submission 데이터는 FormData로 POST 요청을 보냅니다. FormData를 submission하지 않으려면 headers props를 제공하고 대신 application/json을 사용할 수 있습니다.

폼을 점진적으로 개선합니다.
리액트 웹과 리액트 네이티브를 모두 지원합니다.
폼 submission 처리를 관리합니다.

<Form
  action="/api"
  method="post" // 기본값
  onSubmit={() => {}} // 요청 전에 호출할 함수
  onSuccess={() => {}} // 유효한 응답
  onError={() => {}} // 에러 응답
  validateStatus={(status) => status >= 200} // status code 유효성 검사
/>

Props

모든 props는 optional입니다.

Name	Type	Description	Example
`control`	`Control`	`useForm`을 호출하여 제공된 `control` 객체. `FormProvider`를 사용할 경우 선택 사항.	<Form control={control} />
`children`	`React.ReactNode`
`render`	`Function`	headless component에 적합한 Render 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`	status code 유효성 검사 함수.	<Form validateStatus={status => status === 200} />

RULES

submission 데이터를 준비하거나 생략하려면, handleSubmit or 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, progressive enhancement를 위한 optional prop
  })

  return (
    <div>
      // action prop을 사용하여 formData로 POST 요청
      <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>
      // 수동 폼 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>
      }}
    />
  )
}

지원해 주셔서 감사합니다

프로젝트에서 React Hook Form이 유용하다고 생각하신다면, 스타를 눌러 지원해 주시길 부탁드립니다.

Form

</> Form: Component

Props

지원해 주셔서 감사합니다

</> `Form:` Component