ReactHooksFormのuseFieldArrayの使い方
こんにちは。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;
まず、最初から入力欄を1つは表示しておきたいのでdefaultValuesに空で1つ追加しています。
そして、useFieldArrayのfieldとappendとremoveを使用します。 文字通りappnedで入力欄を追加して、removeで削除します。
Controllerについて扱いがよくわからなかったのですが、 パフォーマンス的にはregisterの方が良いようです。 (Controllerは値の更新にuseStateを使用しているため)
順番的にregisterが使えないときにControllerを使うのが良さそう。 今回は追加と削除で入力欄の状態を保持していると考えControllerを使用しています。
まとめ
ReactHooksFormで入力欄の追加削除を動的に扱うパターンが難しかったので知識の整理用にまとめました。 また1つできることが増えたので、今後も少しずつ増やしていきます。
メンバー募集
CURUCURUでは開発メンバーを募集中です。 CURUCURUの開発に興味があったり、モダンな開発環境で挑戦してみたいという方がいましたら、ぜひこちらも覗いてみてください!