Cara menggunakan React Hook Form 7 dengan suis MUI

Question

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?

Answer 1

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.