【RHF】ControllerのonChangeに独自の処理を追加する

MUI×react-hook-formの組み合わせでフォームを実装していて、フォームの値が変化した際の挙動をカスタマイズしたくなりました。

useControllerやControllerコンポーネントを使用していて、フォームの変化時に独自の関数を設定する方法を調べたのでシェアします。

結論: 独自関数にfield.onChange()を入れる

react-hook-form中の人が答えてくれていました。以下のようにonChange関数を拡張することができます。

form.tsx

<input onChange={(e) => {
  field.onChange(e)
  // do your own change event
}} value={field.value} />

引用：https://github.com/orgs/react-hook-form/discussions/9144

当たり前っちゃあたりまえですが、field.onChange()を入れ込めばよいだけとは…さすがの作りです。優れたライブラリを作っている人たちを本当に尊敬します。

僕の場合はフォームの値の変化に反応して別の関数を発火させたかったのですが、「非制御コンポーネントで値の変化に反応…useEffect…いかんいかん！」 と思いとどまることができました。

皆さんの参考になれば幸いです。