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?
根據(jù)文檔。
您需要使用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)" /> )} />;
您可以在這里查看完整的示例。