コンテンツにスキップ

register

非制御/制御された入力を登録する

register (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })

このメソッドを使用すると、input要素またはselect要素を登録し、React Hook Formに検証ルールを適用できます。検証ルールはすべてHTML標準に基づいており、カスタム検証メソッドも許可します。

register関数を呼び出し、inputの名前を指定すると、次のメソッドを受け取ります。

プロパティ

名前型説明
onChangeChangeHandler

inputの変更イベントをサブスクライブするためのonChangeプロップ。

onBlurChangeHandler

inputのblurイベントをサブスクライブするためのonBlurプロップ。

namestring

登録されているinputの名前。

Input Name送信結果
register("firstName"){firstName: 'value'}
register("name.firstName"){name: { firstName: 'value' }}
register("name.firstName.0"){name: { firstName: [ 'value' ] }}

戻り値

ヒント:: register APIを呼び出した後、inputに何が起こったか

const { onChange, onBlur, name, ref } = register('firstName'); 
// include type check against field path with the name you have supplied.
        
<input 
  onChange={onChange} // assign onChange event 
  onBlur={onBlur} // assign onBlur event
  name={name} // assign name prop
  ref={ref} // assign ref prop
/>
// same as above
<input {...register('firstName')} />

オプション

registerオプションを選択すると、以下のAPIテーブルが更新されます。

オプションを選択
名前説明コード例
ref
React.Ref		React要素のref
<input {...register("test")} />
required
boolean

trueの場合、フォームを送信する前にinputに値が必要であることを示すブール値。errorsオブジェクトでエラーメッセージを返す文字列を割り当てることができます。

注意: この設定は、必須input検証のためのWeb制約APIと一致します。objectまたはarray型のinputの場合は、 objectまたはarray型のinputには 代わりにvalidate関数を使用してください。

<input
  {...register("test", {
    required: true
  })}
/>
maxLength
number		このinputで受け入れる値の最大長。
<input
  {...register("test", {
      maxLength: 2
  })}
/>
minLength
number		このinputで受け入れる値の最小長。
<input
  {...register("test", {
    minLength: 1
  })}
/>
max
number		このinputで受け入れる最大値。
<input
  type="number"
  {...register('test', {
    max: 3
  })}
/>
min
number		このinputで受け入れる最小値。
<input
  type="number"
  {...register("test", {
    min: 3
  })}
/>
pattern
RegExp

inputの正規表現パターン。

注意: /gフラグ付きのRegExpオブジェクトは、マッチが発生したlastIndexを追跡します。

<input
  {...register("test", {
    pattern: /[A-Za-z]{3}/
  })}
/>
validate
関数 | オブジェクト

検証の引数としてコールバック関数を渡すことも、すべてのコールバック関数を検証するオブジェクトを渡すこともできます。この関数は、required属性に含まれる他の検証ルールに依存せずに単独で実行されます。

注意: objectまたはarrayのinputデータの場合は、他のルールがほとんどstring、 string[]、number、booleanに適用されるため、検証にはvalidate関数を使用することをお勧めします。データ型。

<input
  {...register("test", {
    validate: (value, formValues) => value === '1'
  })}
/>
// object of callback functions
<input
  {...register("test1", {
    validate: {
      positive: v => parseInt(v) > 0,
      lessThanTen: v => parseInt(v) < 10,
      validateNumber: (_, values) =>
        !!(values.number1 + values.number2), 
      checkUrl: async () => await fetch(),
    }
  })}
/>
valueAsNumber
boolean

通常はNumberを返します。何か問題が発生した場合 NaNが返されます。

  • valueAsの処理は 検証前に行われます。

  • 次のものにのみ適用およびサポートされます<input type="number" />、ただし、トリムやその他のデータ操作なしで数値型にキャストします。

  • defaultValueまたは defaultValues.
<input
  type="number"
  {...register("test", {
    valueAsNumber: true,
  })}
/>
は変換しません。
boolean

valueAsDate

  • valueAsの処理は 検証前に行われます。

  • 通常はDateオブジェクトを返します。何か問題が発生した場合、Invalid Dateが返されます。次にのみ適用されます.

  • defaultValueまたは defaultValues.
<input
  type="date"
  {...register("test", {
    valueAsDate: true,
  })}
/>
<input />
setValueAs

<T>(value: any) => T

  • valueAsの処理は 関数を通して実行してinput値を返します。 検証前に実行されます。また、 valueAsNumberまたはvalueAsDateのいずれかが trueの場合、setValueAsは無視されます。.

  • テキストinputにのみ適用されます。

  • defaultValueまたは defaultValues.
<input
  type="number"
  {...register("test", {
    setValueAs: v => parseInt(v),
  })}
/>
disabled
boolean = false

disabledをtrueに設定すると、inputの値がundefinedになり、inputコントロールが無効になります。

    Disabledプロパティは、 組み込み検証ルールも無視します。

    スキーマ検証の場合、inputまたはコンテキストオブジェクトから返される undefined値を利用できます。

<input
  {...register("test", {
    disabled: true
  })}
/>
onChange
(e: SyntheticEvent) => void

変更イベントで呼び出されるonChange関数イベント。

register('firstName', {
  onChange: (e) => console.log(e)
})
onBlur
(e: SyntheticEvent) => void

blurイベントで呼び出されるonBlur関数イベント。

register('firstName', {
  onBlur: (e) => console.log(e)
})
value
unknown

登録されたinputの値を設定します。このプロパティは、useEffect内で使用するか、一度呼び出す必要があり、再実行するたびに、指定したinput値が更新または上書きされます。

register('firstName', { value: 'bill' })
shouldUnregister
boolean

アンマウント後にinputが登録解除され、defaultValuesも削除されます。

注意: このプロパティは、inputがアンマウント/再マウントおよび並べ替え後にunregister関数が呼び出されるため、useFieldArrayと組み合わせて使用する場合は避ける必要があります。 useFieldArrayと一緒に使用する場合は避ける必要があります。unregister関数は、inputのアンマウント/再マウントおよび並べ替え後に呼び出されます。

<input
  {...register("test", {
    shouldUnregister: true,
  })}
/>
deps
string | string[]

依存するinputの検証がトリガーされます。これはtriggerではなくregister APIに限定されます。

<input
  {...register("test", {
    deps: ['inputA', 'inputB'],
  })}
/>

ルール

  • nameは必須であり、一意です（ネイティブのラジオとチェックボックスを除く）。input名はドット構文とブラケット構文の両方をサポートしており、ネストされたフォームフィールドを簡単に作成できます。

  • nameは数字で開始したり、キー名として数字を使用したりすることはできません。特殊文字も避けてください。

  • TypeScriptの使用方法の一貫性のためだけにドット構文を使用しているため、ブラケット[]は配列フォーム値では機能しません。

    register('test.0.firstName'); // ✅
    register('test[0]firstName'); // ❌

  • disabled inputは、 undefinedフォーム値を生成します。ユーザーがinputを更新できないようにする場合は、readOnlyを使用するか、<fieldset />全体を無効にすることができます。これは 例.

  • フィールドの配列を生成するには、input名の後に ドットと数字を続ける必要があります。例: test.0.data

  • レンダリングごとに名前を変更すると、新しいinputが登録されます。登録された各inputには静的な名前を維持することをお勧めします。

  • inputの値と参照は、アンマウントに基づいて削除されなくなります。unregisterを呼び出して、その値と参照を削除できます。

  • 個々のregisterオプションは、 undefinedまたは{}で削除することはできません。代わりに個々の属性を更新できます。

    register('test', { required: true });
    register('test', {}); // ❌
    register('test', undefined); // ❌
    register('test', { required: false });  // ✅

  • 型チェックと競合する前に避ける必要がある特定のキーワードがあります。それらは、ref、_fです。

例

CodeSandbox JS
import * as React from "react";
import { useForm } from "react-hook-form";


export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      category: '',
      checkbox: [],
      radio: ''
    }
  });


  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input {...register("firstName", { required: true })} placeholder="First name" />


      <input {...register("lastName", { minLength: 2 })} placeholder="Last name" />


      <select {...register("category")}>
        <option value="">Select...</option>
        <option value="A">Category A</option>
        <option value="B">Category B</option>
      </select>
      
      <input {...register("checkbox")} type="checkbox" value="A" />
      <input {...register("checkbox")} type="checkbox" value="B" />
      <input {...register("checkbox")} type="checkbox" value="C" />
      
      <input {...register("radio")} type="radio" value="A" />
      <input {...register("radio")} type="radio" value="B" />
      <input {...register("radio")} type="radio" value="C" />


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

動画

次のビデオでは、register APIについて詳しく説明しています。

ヒント

カスタム登録

useEffectでinputをregisterし、それらを仮想inputとして扱うこともできます。制御されたコンポーネントの場合、カスタムフック useEffectでinputをregisterし、それらを仮想inputとして扱うこともできます。制御されたコンポーネントの場合、このプロセスを処理するためにカスタムフック useControllerと Controller コンポーネントを提供します。

手動でフィールドを登録することを選択した場合、 setValue.

register('firstName', { required: true, min: 8 });


<TextInput onTextChange={(value) => setValue('lastChange', value))} />

でinput値を更新する必要があります。innerRef、inputRefを操作する方法

カスタムinputコンポーネントがrefを正しく公開しない場合は、次のようにして動作させることができます。

// not working, because ref is not assigned
<TextInput {...register('test')} />


const firstName = register('firstName', { required: true })
<TextInput
  name={firstName.name}
  onChange={firstName.onChange}
  onBlur={firstName.onBlur}
  inputRef={firstName.ref} // you can achieve the same for different ref name such as innerRef
/>


// correct way to forward input's ref
const Select = React.forwardRef(({ onChange, onBlur, name, label }, ref) => (
  <select name={name} ref={ref} onChange={onChange} onBlur={onBlur}>
    <option value="20">20</option>
    <option value="30">30</option>
  </select>
));

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

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