如何在MUI開關中使用React Hook Form 7

Question

當使用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並設定初始值？

Answer 1

根據文檔。

您需要使用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)"
    />
  )}
/>;

您可以在這裡查看完整的範例。