先人の偉人達にマジ感謝…圧倒的感謝… !
大体は次の記事に書いてあった。
React Hook Form 向けに書いてあるけど、React Hook Form の要素じゃなくても使える筈。
メソッド戻り値のオブジェクトに『onKeyDown』と『ref』をキ－にして持たせて関数を格納して、カ－ソル移動させたい項目の React 要素で展開するだけ。
原理が理解できれば直ぐ動かせた。
理解に戸惑ったのは React Hook Form と Material UI を利用しているうえで実装しなきゃならなかったからかな…きっとそうだと思う。そうだといいな…
他の参考
- React Hook Form
- React Hook Formの基本を理解してフォームを作成してみよう
- React Hook Formの基本的な使い方
- React Hook Formによるフォームバリデーション
- MUI(Material UI)とreact-hook-formとの連携パターン【select・checkbox・DatePickerなど】
- react-hook-formとMUIを使用した再利用可能なInput共通コンポーネントの作成（TypeScript）
- Material-UIのTextFieldでrefを使う
- Material-UIのTextFieldにエンターキー押下時の処理を追加する
