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

React Hook Formは非制御コンポーネントとネイティブ入力を採用していますが、React-Select、AntD、MUIなどの外部制御コンポーネントを使用せざるを得ない場合もあります。このラッパーコンポーネントを使用すると、それらとの連携が容易になります。

プロパティ

次の表に、Controllerの引数に関する情報を示します。

名前	型	必須	説明
`name`	`FieldPath`	✓	入力の一意の名前。
control	`Control`		`control`オブジェクトは、`useForm`を呼び出すことで取得されます。`FormProvider`を使用する場合はオプションです。
`render`	関数		これはレンダープロップです。React要素を返し、イベントと値をコンポーネントにアタッチする機能を提供します。これにより、非標準のプロパティ名を持つ外部制御コンポーネントとの統合が簡素化されます。子コンポーネントに`onChange`、`onBlur`、`name`、`ref`、`value`を提供し、特定の入力状態を含む`fieldState`オブジェクトも提供します。
`defaultValue`	unknown		重要: `useForm`の`defaultValue`または`defaultValues`には`undefined`を適用できません。フィールドレベルで`defaultValue`を設定するか、`useForm`の`defaultValues`を設定する必要があります。`undefined`は無効な値です。フォームがデフォルト値で`reset`を呼び出す場合、`useForm`に`defaultValues`を提供する必要があります。 `undefined`で`onChange`を呼び出すのは無効です。代わりに`null`または空文字列をデフォルト/クリアされた値として使用してください。
`rules`	オブジェクト		`register`オプションと同じ形式の検証ルール。これには以下が含まれます。 required, min, max, minLength, maxLength, pattern, validate
`shouldUnregister`	boolean = false`		アンマウント後にInputが登録解除され、defaultValuesも削除されます。注記: `useFieldArray`で使用する場合、このプロップは避けるべきです。`unregister`関数はInputのアンマウント/リマウントと並べ替え後に呼び出されます。
`disabled`	boolean = false`		`disabled`プロップは`field`プロップから返されます。制御された入力は無効になり、その値は送信データから省略されます。

戻り値

次の表に、Controllerが生成するプロパティに関する情報を示します。

オブジェクト名	名前	型	説明
`field`	`onChange`	`(value: any) => void`	入力の値をライブラリに送信する関数。入力の`onChange`プロップに割り当てる必要があり、値は`undefined`であってはなりません。このプロパティはformStateを更新します。フィールドの更新に関連するsetValueやその他のAPIを手動で呼び出すのは避けてください。
`field`	`onBlur`	`() => void`	入力のonBlurイベントをライブラリに送信する関数。入力の`onBlur`プロップに割り当てる必要があります。
`field`	`value`	unknown	制御されたコンポーネントの現在の値。
`field`	`disabled`	boolean	入力の無効状態。
`field`	`name`	string	登録されている入力の名前。
`field`	`ref`	React.ref	フックフォームを入力に接続するために使用されるref。`ref`をコンポーネントの入力refに割り当てて、フックフォームがエラー入力をフォーカスできるようにします。
`fieldState`	`invalid`	boolean	現在の入力の無効状態。
`fieldState`	`isTouched`	boolean	現在の制御された入力のタッチ状態。
`fieldState`	`isDirty`	boolean	現在の制御された入力のダーティ状態。
`fieldState`	`error`	object	この特定の入力のエラー。
`formState`	`isDirty`	boolean	ユーザーが入力内容を変更した後、`true`に設定されます。重要: すべての入力の`defaultValues`を`useForm`で提供して、フォームがダーティかどうかを比較するための単一の真実のソースをフックフォームが持つようにしてください。ファイルタイプの入力は、ファイルの選択をキャンセルできることとFileListオブジェクトのために、アプリレベルで管理する必要があります。
`formState`	`dirtyFields`	object	ユーザーが変更したフィールドを含むオブジェクト。すべての入力の`defaultValues`を`useForm`を介して提供して、ライブラリが`defaultValues`と比較できるようにしてください。重要: すべての入力の`defaultValues`を`useForm`で提供して、各フィールドのダーティ状態を比較するための単一の真実のソースをフックフォームが持つようにしてください。ダーティフィールドは、`isDirty` formStateとしては表現されません。なぜなら、ダーティフィールドはフォーム全体ではなくフィールドレベルでダーティフィールドとしてマークされるからです。フォーム全体の状態を確認したい場合は、代わりに`isDirty`を使用してください。
`formState`	`touchedFields`	object	ユーザーが操作したすべての入力を含むオブジェクト。
`formState`	`defaultValues`	object	useFormの`defaultValues`で設定された値、またはresetAPIを介して更新された`defaultValues`。
`formState`	`isSubmitted`	boolean	フォームが送信された後、`true`に設定されます。`reset`メソッドが呼び出されるまで`true`のままです。
`formState`	`isSubmitSuccessful`	boolean	ランタイムエラーなしでフォームが正常に送信されたことを示します。
`formState`	`isSubmitting`	boolean	フォームが現在送信中の場合は`true`。それ以外の場合は`false`。
`formState`	`isLoading`	boolean	フォームが現在非同期デフォルト値を読み込んでいる場合は`true`。重要: このプロップは非同期`defaultValues`にのみ適用されます。
`formState`	`submitCount`	number	フォームが送信された回数。
`formState`	`isValid`	boolean	フォームにエラーがない場合、`true`に設定されます。 `setError`は`isValid` formStateに影響を与えません。`isValid`は常にフォーム全体の検証結果から導出されます。
`formState`	`isValidating`	boolean	検証中は`true`に設定されます。
`formState`	`errors`	object	フィールドエラーを含むオブジェクト。エラーメッセージを簡単に取得するためのErrorMessageコンポーネントもあります。

例

ウェブ

CodeSandbox ^TS

import ReactDatePicker from "react-datepicker"
import { TextField } from "@material-ui/core"
import { useForm, Controller } from "react-hook-form"

type FormValues = {
  ReactDatepicker: string
}

function App() {
  const { handleSubmit, control } = useForm<FormValues>()

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Controller
        control={control}
        name="ReactDatepicker"
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange} // send value to hook form
            onBlur={onBlur} // notify when input is touched/blur
            selected={value}
          />
        )}
      />

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

React Native

Expo ^JS

import { Text, View, TextInput, Button, Alert } from "react-native"
import { useForm, Controller } from "react-hook-form"

export default function App() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
    },
  })
  const onSubmit = (data) => console.log(data)

  return (
    <View>
      <Controller
        control={control}
        rules={{
          required: true,
        }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            placeholder="First name"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
          />
        )}
        name="firstName"
      />
      {errors.firstName && <Text>This is required.</Text>}

      <Controller
        control={control}
        rules={{
          maxLength: 100,
        }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            placeholder="Last name"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
          />
        )}
        name="lastName"
      />

      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  )
}

ビデオ

次のビデオでは、Controllerの内側と、その構築方法を紹介しています。

ヒント

MUI、AntD、Chakra UIなどの外部制御コンポーネントを使用する際には、各プロップの役割を理解することが重要です。コントローラーは、値を報告および設定することで、入力に対する「監視役」として機能します。
- onChange: データをフックフォームに送り返します
- onBlur: 入力が操作されたことを報告します（フォーカスとブラー）
- value: 入力の初期値と更新された値を設定します
- ref: エラーが発生した場合に入力にフォーカスできるようにします
- name: 入力に一意の名前を付けます。以下のCodesandboxが使用方法を示しています。
- MUIおよびその他のコンポーネント
- Chakra UIコンポーネント

入力を再度registerしないでください。このコンポーネントは登録プロセスを処理するように作られています。

<Controller
  name="test"
  render={({ field }) => {
    // return <input {...field} {...register('test')} />; ❌ double up the registration
    return <input {...field} /> // ✅
  }}
/>

onChange中に値を変換することで、フックフォームに送信される値をカスタマイズします。

<Controller
  name="test"
  render={({ field }) => {
    // sending integer instead of string.
    return (
      <input
        {...field}
        onChange={(e) => field.onChange(parseInt(e.target.value))}
      />
    )
  }}
/>

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

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

コントローラー

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

プロパティ

戻り値

ビデオ

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

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