Comment utiliser React Hook Form 7 avec le commutateur MUI

Question

Lors de l'utilisation de React-hook-form avec un commutateur MUI, le commutateur n'affiche pas la valeur initiale lors du chargement de la page même si la valeur est définie sur true. Cependant, cela semble être un problème d'affichage, car soumettre le formulaire sans toucher le bouton renvoie un true avec le commutateur défini comme vrai. De plus, cliquer une fois sur ces boutons (affichés comme faux) n'aura aucun effet (ils resteront toujours à gauche), et un deuxième clic les fera basculer à nouveau.

Utilisez le hook pour définir la valeur initiale (s'applique à tous les autres types de champs) :

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

Le changement est mis en œuvre comme suit :

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

Il s'agit à son tour d'un composant de case à cocher entièrement fonctionnel :

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

Comment utiliser react-hook-form dans le commutateur MUI et définir la valeur initiale ?

Answer 1

Basé sur documentation.

Vous devez utiliser l'attribut react-hook-form中的Controller组件来包装您的Switch组件，并从字段对象传递value和onChange.

Par exemple :

<Controller
  name="show_profile"
  control={control}
  render={({ field: { onChange, value } }) => (
    <FormControlLabel
      control={<Switch checked={value} onChange={onChange} />}
      label="Profil öffentlich (beinhaltet Vor- und Nachname)"
    />
  )}
/>;

Vous pouvez voir l'exemple complet ici.