こんにちは。CURUCURUエンジニアの水谷です。 今回はReactHooksFormのuseFieldArrayについて書いていきます。

ReactHooksFormはフォーム作成に便利なので使用している人も多いと思います。 しかし、便利な半面、癖も強いので書き方に戸惑うときもあると思います。

今回はフォームの入力欄を動的に増やす際に戸惑ったので、そのときのことについて書いていきます。 具体的には、

• 追加ボタンを押すと入力欄が増える
• 削除ボタンを押すと入力欄が減る

といった動作を作りました。 では、書いていきます。

---

入力欄を動的に変えるにはReactHooksFormのuseFieldArrayを使用します。 useFieldArrayの公式説明は下記です。 公式説明

まず使用例について書いていきます。

import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';

function App() {
  // useFormの初期値に受け取ったデータを設定
  const { control, handleSubmit, watch } = useForm({
    defaultValues: {
      items: [{ item: "" }] // 初期値として1つの入力欄を表示
    }
  });

  // 受け取ったデータを監視
  const items = watch('items');

  const { fields, append, remove } = useFieldArray({
    control,
    name: "items"
  });

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((list, index) => (
        <div key={list.id}>
          <Controller
            control={control}
            name={`items.[${index}].item`}
            render={({ field }) => <input {...field} />}
          />
          <button type="button" onClick={() => remove(index)}>削除</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: "" })}>追加</button>
      <input type="submit" />
    </form>
  );
}

export default App;

まず、最初から入力欄を１つは表示しておきたいのでdefaultValuesに空で１つ追加しています。

そして、useFieldArrayのfieldとappendとremoveを使用します。 文字通りappnedで入力欄を追加して、removeで削除します。

Controllerについて扱いがよくわからなかったのですが、 パフォーマンス的にはregisterの方が良いようです。 （Controllerは値の更新にuseStateを使用しているため）

順番的にregisterが使えないときにControllerを使うのが良さそう。 今回は追加と削除で入力欄の状態を保持していると考えControllerを使用しています。

まとめ

ReactHooksFormで入力欄の追加削除を動的に扱うパターンが難しかったので知識の整理用にまとめました。 また１つできることが増えたので、今後も少しずつ増やしていきます。

メンバー募集

CURUCURUでは開発メンバーを募集中です。 CURUCURUの開発に興味があったり、モダンな開発環境で挑戦してみたいという方がいましたら、ぜひこちらも覗いてみてください！