當使用react-hook-form與MUI開關一起使用時,即使將值設為true,開關在頁面載入時也不會顯示初始值。然而,這似乎是一個顯示問題,因為在未觸摸按鈕的情況下提交表單會傳回具有定義為true的值的開關的true
。此外,點擊這些按鈕(顯示為false)一次不會產生任何效果(它們仍然停留在左邊),第二次點擊將實際上再次切換它們。
使用hook設定初始值(適用於所有其他欄位類型):
useEffect(() => { if (userProfile) { setValue('firstname', userProfile.firstname); setValue('lastname', userProfile.lastname); setValue('show_profile', userProfile.show_profile || false); } }, [userProfile]);
開關的實作如下:
<FormControlLabel control={<Switch {...register('show_profile')} />} label="Profil öffentlich (beinhaltet Vor- und Nachname)" />
這反過來是一個完全正常工作的複選框元件:
<FormControlLabel control={ <Checkbox {...register('steuerbescheinigung')} name="steuerbescheinigung" /> } label="Steuerbescheinigung benötigt?" />
如何在MUI開關中使用react-hook-form
並設定初始值?
P粉9330033502023-09-17 15:30:52
根據文檔。
您需要使用react-hook-form
中的Controller
元件來包裝您的Switch
元件,並從欄位物件傳遞value
和onChange
屬性。
例如:
<Controller name="show_profile" control={control} render={({ field: { onChange, value } }) => ( <FormControlLabel control={<Switch checked={value} onChange={onChange} />} label="Profil öffentlich (beinhaltet Vor- und Nachname)" /> )} />;
您可以在這裡查看完整的範例。