</> `Form:` コンポーネント

注記: このコンポーネントは現在ベータ版です。

このコンポーネントはオプションであり、標準的なネイティブフォームと密接に連携することで、フォーム送信を処理します。

デフォルトでは、フォーム送信データはFormDataとしてPOSTリクエストで送信されます。`headers`プロップを指定することで、FormDataの送信を避け、代わりに`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
/>

プロップ

すべてプロップはオプションです

名前	型	説明	例
`control`	`Control`	`control` オブジェクト。`useForm`を呼び出すことで提供されます。`FormProvider`を使用する場合はオプションです。	<Form control={control} />
`children`	`React.ReactNode`
`render`	`関数`	ヘッドレスコンポーネントに適したレンダープロップ関数。	<Form render={({ submit }) => <View/>} />
`onSubmit`	`関数`	検証が成功した後呼び出される関数。	<Form onSubmit={({ data }) => mutation(data)} />
`onSuccess`	`関数`	サーバーへのリクエストが成功した後呼び出される関数。	<Form onSuccess={({ response }) => {}} />
`onError`	`関数`	サーバーへのリクエストが失敗した後呼び出される関数。 `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>
      }}
    />
  )
}

ご支援ありがとうございます

React Hook Formがプロジェクトで役立つと思われる場合は、スターを付けてサポートをご検討ください。

フォーム

</> Form: コンポーネント

プロップ

ご支援ありがとうございます

</> `Form:` コンポーネント