【ReactHooks】useFieldArrayの使い方

ReactのuseFieldArrayは、フォームにおいて、動的に増減するフィールドの配列を扱うためのカスタムフックです。以下に、useFieldArrayの使い方を示します。

まず、フォームの中で、動的に増減するフィールドの配列を表すinput要素のname属性には、ドット区切りの文字列で配列の名前を指定します。例えば、以下のようなフォームがあるとします。

<form onSubmit={handleSubmit}>
  <input type="text" name="firstName" />
  <input type="text" name="lastName" />

  <h3>Contacts</h3>
  <button type="button" onClick={() => append({ name: "", email: "" })}>
    Add Contact
  </button>
  {fields.map((contact, index) => (
    <div key={contact.id}>
      <input type="text" name={`contacts.${index}.name`} />
      <input type="text" name={`contacts.${index}.email`} />
      <button type="button" onClick={() => remove(index)}>
        Remove Contact
      </button>
    </div>
  ))}

  <button type="submit">Submit</button>
</form>

上記の例では、Contactsという見出しの下に、動的に増減する配列contactsを扱うためのボタンとフィールドを表示しています。contacts配列は、name属性に「contacts.{index}.name」と「contacts.{index}.email」というフォーム名を付けたinput要素の値として、フォームデータに含まれます。また、動的な配列に対する操作として、追加ボタンを押したときの動作と、配列の中から特定の要素を削除するためのボタンを設定しています。

そして、useFieldArrayを使うためには、以下のようにカスタムフックをimportし、フォームの中で以下のように呼び出します。

import { useForm, useFieldArray } from "react-hook-form";

function MyForm() {
  const { register, handleSubmit, control } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "contacts"
  });

  return (
    <form onSubmit={handleSubmit}>
      ...
    </form>
  );
}

useFieldArrayの引数には、以下のプロパティを指定できます。

name: input要素のname属性で指定した配列の名前を指定します。上記の例では、「contacts」です。
control: useFormの戻り値であるcontrolオブジェクトを指定します。これにより、React Hook Formがフォーム内の全ての入力値を管理できます。
useFieldArrayを呼び出すことで、動的な配列のフィールドを追加・削除することができます。例えば、追加ボタンを押したときには、append関数を呼び出すことで、新しい要素を配列に追加できます。remove関数を呼び出すことで、特定の要素を配列から削除できます。上記の例では、以下のようにappendとremove関数を使用しています。

<button type="button" onClick={() => append({ name: "", email: "" })}>
  Add Contact
</button>

{fields.map((contact, index) => (
  <div key={contact.id}>
    <input type="text" name={`contacts.${index}.name`} ref={register()} />
    <input type="text" name={`contacts.${index}.email`} ref={register()} />
    <button type="button" onClick={() => remove(index)}>
      Remove Contact
    </button>
  </div>
))}

ここで、append関数には、新しい要素の初期値をオブジェクトとして渡しています。また、remove関数には、削除する要素のインデックスを指定しています。

上記の例では、useFormと組み合わせてフォーム全体を管理していますが、useFieldArrayは、独立したカスタムフックとして使用することもできます。詳しくは、React Hook Formのドキュメントを参照してください。