Apabila menggunakan react-hook-form dengan suis MUI, suis tidak menunjukkan nilai awal pada pemuatan halaman walaupun nilai ditetapkan kepada benar. Walau bagaimanapun, ini nampaknya merupakan isu paparan, kerana menyerahkan borang tanpa menyentuh butang mengembalikan true
dengan suis ditakrifkan sebagai benar. Selain itu, mengklik butang ini (ditunjukkan sebagai palsu) sekali tidak akan memberi kesan (ia masih kekal di sebelah kiri), dan klik kedua sebenarnya akan menogolnya semula.
Gunakan cangkuk untuk menetapkan nilai awal (digunakan untuk semua jenis medan lain):
useEffect(() => { if (userProfile) { setValue('firstname', userProfile.firstname); setValue('lastname', userProfile.lastname); setValue('show_profile', userProfile.show_profile || false); } }, [userProfile]);
Suis dilaksanakan seperti berikut:
<FormControlLabel control={<Switch {...register('show_profile')} />} label="Profil ?ffentlich (beinhaltet Vor- und Nachname)" />
Ini pula merupakan komponen kotak semak yang berfungsi sepenuhnya:
<FormControlLabel control={ <Checkbox {...register('steuerbescheinigung')} name="steuerbescheinigung" /> } label="Steuerbescheinigung ben?tigt?" />
Bagaimana untuk menggunakan react-hook-form
dalam suis MUI dan tetapkan nilai awal?
Berdasarkan dokumentasi.
Anda perlu menggunakan atribut react-hook-form
中的Controller
組件來包裝您的Switch
組件,并從字段對象傳遞value
和onChange
.
Contohnya:
<Controller name="show_profile" control={control} render={({ field: { onChange, value } }) => ( <FormControlLabel control={<Switch checked={value} onChange={onChange} />} label="Profil ?ffentlich (beinhaltet Vor- und Nachname)" /> )} />;
Anda boleh lihat contoh lengkap di sini.