MUI スイッチで React Hook Form 7 を使用する方法

Question

react-hook-form を MUI スイッチで使用する場合、値が true に設定されていても、ページの読み込み時にスイッチに初期値が表示されません。ただし、ボタンに触れずにフォームを送信すると、スイッチの値が true として定義されている true が返されるため、これは表示の問題であるようです。さらに、これらのボタン (false として表示) を 1 回クリックしても効果はなく (ボタンは左側に残ったままになります)、2 回目のクリックで実際に再び切り替わります。

フックを使用して初期値を設定します (他のすべてのフィールド タイプに適用されます):

リーリー

スイッチの実装は次のとおりです:

リーリー

これは完全に機能するチェックボックス コンポーネントです:

リーリー

MUI スイッチで react-hook-form を使用して初期値を設定するにはどうすればよいですか?

Answer 1

ドキュメントによると。

react-hook-form の Controller コンポーネントを使用して Switch コンポーネントをラップし、フィールド オブジェクトから value# を渡す必要があります。 ## プロパティと onChange プロパティ。 ＃＃＃例えば：＃＃＃ リーリー

完全な例は

ここ

でご覧いただけます。