🌟

Conform v1 でプログラマティックにフォームを設定する方法 (form.update等)

2024/02/15に公開

Next.js

これはなに

Remix や Next.js でも使える超快適なフォームライブラリ Conform で、プログラマティックにフォームを設定したいと思ったのですが、やり方が公式サイトをざっと見ただけだとわからなかったので調べたら、やっぱり簡単で快適だったよ！、という記事です。

「プログラマティックにフォームを設定する」というのは、例えば select の選択項目に応じて　input のテキストを変更したい、というようなケースです。

こんなかんじです。

通常 React で非制御コンポーネントでやる場合は ref で DOM を操作するやり方になるとおもうんですが、やっぱり useRef 使って変数増やすのだるいので、 conform だとどうやるのかな？というところからやってみたというわけです。

結論: submission intent (form.update) を使う

以下のように、 form.update.getButtonProps 関数を type='submit' な button で使うか、イベントハンドラで form.update 関数を呼び出す形で反映されます。

{/* form.update.getButtonProps でやる場合は type='submit' にしないと動かない */}
<button
  type="submit"
  {...form.update.getButtonProps({
    name: message.name,
    value: 'Hello! from form.update.getButtonProps',
  })}
>
  getButtonProps で update
</button>

{/* form.update でやる場合は type='button' で OK */}
<button
  type="button"
  onClick={() => {
    form.update({
      name: message.name,
      value: 'こんにちは！ from form.update',
    })
  }}
>
  form.update で update
</button>

{/* select の選択に応じて変更 */}
<select onChange={(e) => form.update({ name: message.name, value: e.target.value })}>
  <option>プリセット1</option>
  <option>プリセット2</option>
  <option>プリセット3</option>
</select>

form.update.getButtonProps でやる場合に type='button' だと動かない。
form.update({ name: message.name }) のように、useForm　で返ってくる fields の name プロパティを使わないといけない。 { name: 'message' } ではないので注意。

デモとソースコード

以下で直接操作できるデモを用意しています。

デモのソースコードはこちらです。remix です。

intent button ってなに？

conform の公式ガイドにあるんですが、ちょっと最初は分かりづらいかもしれません。私は type='button' だと動かないのでハマってました。

ここで取り上げた udpate のほか、reset や、array 要素の insert, remove, reorder もあって、シンプルに書けるのでとても便利ですね！

conform はいいぞ

react-hook-form とかよりシンプルで使いやすいと思います！