選択した値をreact-hook-form状態でボタングループに保存します

Question

MUI ボタン​​ グループで選択した値を、react-hook-form の状態に保存しようとしていますが、値が正しく更新されないという問題が発生しています。

コードサンドボックスのリンクはこちら

これは私のコードの汎用バージョンです:

リーリー

私は setValue('selectedOption', option) を使用しましたが、これが良い習慣であるかどうかはわかりません。

私が直面している問題は、ボタン グループ内のボタンをクリックすると、フォーム状態の selectedOption 値がクリックされたボタンの値で更新されるようにしたいということです。ただし、getValuesメソッドには更新された状態が反映されないようです。

ここで何が問題になるでしょうか?ボタン グループ内のボタンがクリックされたときに、selectedOption 値を正常に更新および取得するにはどうすればよいですか?

ご協力いただきありがとうございます。

Answer 1

を使用したくない場合は、FormProvider を useFormContext とともに使用する必要があります。 to コンテキストは Form コンポーネントにプロップとして渡されます。 (例を見てこれを実行したいと思います)。

から

useFormContext ドキュメント: ＃＃＃例えば：＃＃＃ リーリー

作業中のコードサンドボックス:

https://codesandbox.io/s/react-hook-form-no-props-kngps3?file=/src/Form.jsx