【React】react-hook-formで動的フォームを作る

react-hook-formで動的フォームを作るには、useFiledArrayを使用します。

import { useForm, useFieldArray } from "react-hook-form";
const Index = () => { const { control, register } = useForm({ defaultValues: { sampleText: [{ value: '' }] }, }); const { fields, append, remove } = useFieldArray({ control, name: "sampleText", }); return ( <> {fields.map((field, index) => ( <div key={index}> <input key={field.id} {...register(`sampleText.${index}.value`)} /> <button onClick={() => remove(index)}>削除</button> </div> ))} <button onClick={() => append({ value: '' })}>追加</button> </> );
};
export default Index;

useFieldArrayのappendを使用するとフィールドの末尾にフォームを追加することができます。

removeは引数にインデックス番号を渡すとそのインデックスのフォームを削除することができます。

今回の例では末尾に追加をしていますが、insertを使用すると特定の位置にフォームを追加することができます。

↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村