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??
Basé sur documentation.
Vous devez utiliser l'attribut react-hook-form
中的Controller
組件來(lái)包裝您的Switch
組件,并從字段對(duì)象傳遞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.