ヘッドレスUIコンボボックスでreact-hook-formsのレジスタを使用する方法

Question

このコードがあり、react-hook-form を使用してヘッドレス UI から Combobox コンポーネントに接続しようとしています。別の値を入力し、別のオプションを選択しようとすると、必ずエラー メッセージが表示されます。 未定義のプロパティを読み取ることができません (「名前」を読み取ります)

さまざまなバリエーションを試してみましたが、Combobox を register で動作させることができませんでした。ご協力をいただければ幸いです。 register を使用してジョブを実行したいのですが、react-hook-form のメソッドを実行するために他の Controller メソッドを使用したくありません。

リーリー

Answer 1

react-hook-form ハンドラーを Combobox に直接アタッチすることはおそらく得策ではありません。

1. Input > onChange は、Location/User/... Model API の代わりに、文字列 target.value を含むイベントを提供します。 handleSubmitでコピーリクエストを発行して「解凍」していただけますか?もしそうなら、API エラー あそこ をどのように処理しますか? ！

2. 入力は、Combobox レベルの API エラーに関連している可能性があります。フォーム コンポーネント レベルで「成功」文字列と「失敗」文字列を区別するには特に注意する必要があります。

3. 文字列はフォーム コンポーネント レベルでは解析できない場合があります。特に「複数」モードでは、「3 つの項目が選択されました」など、入力に集約された情報を表示できます。 register を Combobox.Input に展開すると、これが値になります。

4. 最後に、他の (ヘッドレス UI 以外の) Combobox 実装では、値は元のユーザー入力を保持します。

＃＃＃例えば：＃＃＃

ユーザー入力:「ユナイテッド航空」

1. 選択候補:「米国」、「英国」...
2. ユーザーがオプションを選択します
3. Combobox
4. は新しい値を受け取りますが、Combobox.Input 値は「United」のままです
移植可能で将来性のあるアプローチに固執することもできます。

結論は同じです。

---

Combobox

に値を解析して変換させます。 Combobox.Input の代わりに onChange を Combobox に指定します。ただし、これは Controlled RHF API バリアントでのみ可能です。