So verwenden Sie React Hook Form 7 mit MUI-Schalter

Question

Bei Verwendung von „react-hook-form“ mit MUI-Schalter zeigt der Schalter beim Laden der Seite nicht den Anfangswert an, selbst wenn der Wert auf „true“ gesetzt ist. Dies scheint jedoch ein Anzeigeproblem zu sein, da beim Absenden des Formulars ohne Berühren der Schaltfläche ein true zurückgegeben wird und der Schalter als „true“ definiert ist. Darüber hinaus hat ein einmaliges Klicken auf diese Schaltflächen (als falsch angezeigt) keine Auswirkung (sie bleiben weiterhin auf der linken Seite), und ein zweiter Klick schaltet sie tatsächlich wieder um.

Hook verwenden, um den Anfangswert festzulegen (gilt für alle anderen Feldtypen):

useEffect(() => {
  if (userProfile) {
    setValue('firstname', userProfile.firstname);
    setValue('lastname', userProfile.lastname);
    setValue('show_profile', userProfile.show_profile || false);
  }
}, [userProfile]);

Der Schalter wird wie folgt umgesetzt:

<FormControlLabel
    control={<Switch {...register('show_profile')} />}
    label="Profil öffentlich (beinhaltet Vor- und Nachname)"
/>

Dies wiederum ist eine voll funktionsfähige Checkbox-Komponente:

<FormControlLabel
    control={
      <Checkbox
        {...register('steuerbescheinigung')}
        name="steuerbescheinigung"
      />
    }
    label="Steuerbescheinigung benötigt?"
  />

Wie verwende ich react-hook-form im MUI-Schalter und lege den Anfangswert fest?

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)"
    />
  )}
/>;

您可以在这里查看完整的示例。