反応フックフォーム + チャクラUI + 任意の電話番号ライブラリ (おそらくデュエル参照の問題)

Question

私は、react-hook-form を使用して、深くネストされ、useFormContext パラダイムを介して参照される汎用フォーム コンポーネントを構築し、コンポーネントの任意の深いネストを可能にしています。スタイリングにはChakra-UIを使用しました。これはすべて正常に動作します。ただし、一部のフォームに国際電話番号の入力を追加したいと考えています。

NextJS コンテキストでパフォーマンスが高く、RHF および Chakra で動作する限り、どのライブラリを使用するかはあまり気にしません。そのため、以下とはまったく異なる方向の提案を歓迎します。

私は、react-international-phone の使用にかなり近づいていると思います。

私が抱えている問題 (他のライブラリでも同様だが少し異なる問題があった) は、react-international-phone は Chakra または React-Hook-form のいずれかとうまく動作するが、同時に両方を使用することはできないということです。両方同時に。

Github ソース コードでは、react-international-phone に Chakra-UI と統合された Storybook のサンプルがあり、次のように動作します。 リーリー

React-hook-forms で Chakra

Input コンポーネントを使用すると、次のようになります: リーリー

これら 2 つのものを組み合わせる場合の 2 つの問題は、

...register が ref を HTML 入力に返すことと、React-international-phone が onChange# # を行う必要があることです。 # プロパティとして usePhoneInput フックに渡されます。 最初の質問については、この回答を使用して

を実行できると思いました。 リーリー

しかし、

phoneInput.inputRef

は関数ではなくオブジェクトであると不満を述べています。実際、ドキュメントには React.RefObject<HTMLInputElement> と記載されていますが、これは関数ではないと思います。しかし、サンプル コードで ref={phoneInput.inputRef} が機能する理由はわかりません。 2 番目の問題は、react-hook-form

register

レスポンスをリファクタリングし、返された onChange を usePhoneInput フックに渡すことで解決できると思います。 最初にこれを試してみました

リーリー

しかし、問題は、

usePhoneInput

がフックであるため、実際にはそこで呼び出すことができないことです。私の現在地は です リーリー I

feel

は近いですが、まだ機能しません。 CodeSandboxに入れておきました。 CodeSandbox が壊れています。App.js でフォームへの呼び出しをコメントアウトしました。コメントを解除するとブラウザがロックされるためです。:( 反応フックフォームとチャクラUIをこれまたは他の電話番号ライブラリに接続する方法について何かアイデアはありますか?

Answer 1

コメント内の @adsy からのヒントにより、この問題は解決されました。

コンポーネントで useController を使用します:

リーリー

(およびコンポーネントの ref へのマイナーな変更)。

その後、深いネストのために呼び出すときは、control:

も構造解除します。 リーリー