Material-ui: Bekerja dengan react-hook-form

Saya telah menambahkan tag waiting for users upvotes . Saya menutup masalah ini karena kami tidak yakin orang-orang mencari dukungan seperti itu. Jadi tolong upvote masalah ini jika ya. Kami akan memprioritaskan upaya kami berdasarkan jumlah suara positif.

https://npm-stat.com/charts.html?package=formik&package=react-hook-form&package=react-final-form

sangat dibutuhkan :berdoa::berdoa::berdoa: ada solusi?

sangat dibutuhkan!

Pasti dibutuhkan.

Adakah ide tentang apa solusinya?

Saya tidak yakin tentang sesuatu yang spesifik tetapi saya tahu saya mulai menggunakan kedua perpustakaan dan saya benar-benar ingin melihat integrasi yang lebih erat di antara keduanya. React Hook Form dan Material UI sangat bagus jika digabungkan. Dukungan mereka untuk TypeScript juga bagus.

Hei, @oliviertasinari terima kasih telah melihatnya. Sepertinya MUI TextField bekerja lebih baik dengan API input asli sekarang! Itu sangat bagus. Kami dulu memiliki overlay teks placeholder di atas teks saat Anda memanggil e.target.value = 'xxx' . 👍

https://codesandbox.io/s/react-hook-form-conditional-fields-delete-1frsm
Pada contoh di atas <Switch /> tidak direset setelah reset API dipanggil.

Akan sangat menyenangkan jika kita dapat memiliki semua komponen terkait formulir untuk mendukung API input formulir asli (mengatur dan mengatur ulang nilai melalui referensi input) Saya mengerti ini adalah pekerjaan besar dan untuk mendukung lib kecil seperti react-hook-form adalah sesuatu yang harus dipertimbangkan (mungkin sampai jika lib semakin populer ❤️)

sekali lagi saya sangat menghargai waktu dan upaya Anda untuk melihat masalah ini (mempertahankan proyek open source BESAR seperti MUI yang gila bagi saya dan Anda melakukan pekerjaan yang luar biasa untuk komunitas React). Selain itu, beri tahu saya jika ada yang bisa saya kerjakan untuk bekerja dengan MUI juga.

Bersulang
Tagihan

@bluebill1049 Terima kasih telah melihatnya. Perpustakaan tampaknya mendapatkan daya tarik yang baik, tetapi masih jauh di belakang formik. Apakah sakelar reset satu-satunya masalah yang kami miliki?

terima kasih, @olivietassinari telah membuka kembali dan menyelidiki masalah ini. 🙏 ya, Anda benar react-hook-form masih anak baru di kota dan Anda tidak perlu bertindak jika Anda ingin menunggu lebih lama untuk melihat apakah lebih banyak pengguna yang mengadopsi react-hook-form , yang Menurut saya itu sangat wajar (walau di dalam hati saya sangat ingin bekerja sama dengan MUI, hahaha egois😼). Sementara itu, saya akan membuat tabel input yang kompatibel dengan react-hook-form luar kotak (mungkin bahkan dengan kode dan kotak juga) saya akan mempostingnya di sini juga.

Jika semuanya bekerja dengan baik dengan react-hook-form dan penggunaan tumbuh lebih besar, mungkin kita dapat mempertimbangkan untuk bekerja dengan API input asli (yang digunakan oleh react-hook form di belakang layar) akan sangat bagus untuk mendapatkan input , select , radio dan checkbox berfungsi karena itu adalah penggunaan utama untuk formulir.

FYI @oliviertasinari Saya sedang mengerjakan sesuatu untuk menutup celah antara MUI dan react-hook-form. https://github.com/react-hook-form/react-hook-form-input

Juga menghadapi masalah dengan reset dan memuat data default. Silakan lihat masalah ini. Atau setidaknya memberikan solusi untuk saat ini.

Hai @raikusy tolong lihat tautan yang saya posting di atas, saya pikir itu akan membantu Anda. Dalam jangka panjang, akan sangat bagus bagi komponen MUI untuk mendukung bentuk asli api 'reset' dan memperbarui nilai melalui komponen 'ref', tetapi ini adalah harga pekerjaan yang besar yang saya yakin MUI memiliki banyak fitur dan ide. yang lebih penting. Seperti yang telah kita bahas di atas hingga bentuk react hook menjadi mainstream lib atau menjadi populer maka MUI akan mulai mencari solusinya. Semoga ini masuk akal :) terima kasih telah menggunakan formulir kait reaksi juga ❤️🤩🤟🏻

FYI bahwa komponen pembungkus masih akan memungkinkan formulir Anda memiliki 0 render ulang. Karena pembaruan status input diisolasi di dalam komponen pembungkus.🤩🤟🏻💃

Terima kasih @bluebill1049 ini tampak hebat. Saya memiliki kondisi di mana bidang formulir akan memiliki nilai default ketika data dilewatkan dari alat peraga. Jadi, apakah komponen TextField akan bekerja dengan solusi di atas juga? Saya juga sedang mencari contoh yang lebih baik untuk meneruskan nilai default dengan alat peraga ke formulir. Alat peraga kadang-kadang mungkin berasal dari panggilan api setelah formulir dipasang.

@raikusy Anda harus dapat menggunakan reset/setValue API dengan komponen pembungkus.
reset: untuk seluruh formulir -> https://react-hook-form.com/api#setValue
setValue: untuk individu -> https://react-hook-form.com/api#reset

Saya tidak bisa mendapatkan <Slider /> untuk bekerja dengan RHF.

Menggunakannya seperti:

      <FormControl fullWidth component="fieldset" margin="normal">
        <FormLabel component="legend">Palavras</FormLabel>
        <RHFInput
          as={<Slider min={100} max={1200} step={100} valueLabelDisplay="auto" marks={marks} />}
          type="input"
          name="words"
          register={register}
          setValue={setValue}
        />
      </FormControl>

Saya mendapatkan kesalahan berikut:

Warning: Failed prop type: Invalid prop `value` supplied to `ForwardRef(Slider)`.
    in ForwardRef(Slider) (created by WithStyles(ForwardRef(Slider)))
    in WithStyles(ForwardRef(Slider)) (created by SetupAccountForm)
    in Unknown (created by SetupAccountForm)
    in fieldset (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by SetupAccountForm)
    in form (created by SetupAccountForm)
    in SetupAccountForm (created by SetupAccountPage)
    in div (created by ForwardRef(CardContent))
    in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
    in WithStyles(ForwardRef(CardContent)) (created by SetupAccountPage)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by SetupAccountPage)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Layout)
    in Layout (created by SetupAccountPage)
    in SetupAccountPage (created by App)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in App (created by Root)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (created by Root)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (created by Root)
    in Provider (created by Root)
    in Root Button.js:233:15

@hbarcelos sepertinya slider tidak mendukung value props :( Saya akan melakukan beberapa investigasi di atasnya. Sementara itu, Anda mungkin harus menggunakan register khusus, yaitu mendaftar di useEffect

Terima kasih banyak @bluebill1049

Saya akhirnya membuat sesuatu seperti ini:

import React, { useEffect, useCallback, useState, useMemo } from 'react';
import t from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Slider from '@material-ui/core/Slider';

const useStyles = makeStyles(theme => ({
  sliderWrapper: {},
  sliderLabel: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(0.5),
    color: theme.palette.primary.main,
  },
}));

function CustomSlider({
  register,
  unregister,
  setValue,
  name,
  rules,
  defaultValue,
  valueLabelAs,
  formatLabel,
  ...rest
}) {
  const cl = useStyles();

  const [currentValue, setCurrentValue] = useState(defaultValue);

  useEffect(() => {
    register({ name });
    return () => unregister(name);
  }, [defaultValue, name, register, setValue, unregister]);

  const valueLabel = useMemo(() => {
    if (!valueLabelAs) {
      return null;
    }

    return React.cloneElement(
      valueLabelAs,
      { className: clsx(valueLabelAs.props.className, cl.sliderLabel) },
      formatLabel(currentValue)
    );
  }, [cl.sliderLabel, currentValue, formatLabel, valueLabelAs]);

  const handleChange = useCallback(
    (_, value) => {
      setValue(name, value);
      setCurrentValue(value);
    },
    [name, setValue]
  );

  return (
    <React.Fragment>
      {valueLabel}
      <Box className={cl.sliderWrapper}>
        <Slider {...rest} onChange={handleChange} defaultValue={defaultValue} />
      </Box>
    </React.Fragment>
  );
}

CustomSlider.defaultProps = {
  rules: {},
  defaultValue: '',
  valueLabelAs: null,
  formatLabel: v => v,
};

CustomSlider.propTypes = {
  register: t.func.isRequired,
  unregister: t.func.isRequired,
  setValue: t.func.isRequired,
  name: t.string.isRequired,
  rules: t.object,
  defaultValue: t.oneOfType([t.number, t.string]),
  valueLabelAs: t.node,
  formatLabel: t.func,
};

export default CustomSlider;

Ia bekerja seperti yang diharapkan.

Sangat membutuhkan ini juga

Dalam jangka panjang, akan sangat bagus jika komponen MUI mendukung 'reset' api bentuk asli dan memperbarui nilai melalui komponen 'ref'.

@ bluebill1049 Bukankah ini masalah dengan React atau react-hook-form itu sendiri? Bagaimana seharusnya pengembang "bereaksi" terhadap perubahan status input dengan react-hook-form?
Katakanlah saya seorang pengembang Bereaksi yang membangun input khusus, dan saya ingin menata elemen secara berbeda ketika diisi/kosong, bagaimana saya harus menerapkan ini? Tampaknya tidak ada acara perubahan yang dipecat.

Sudahkah Anda mempertimbangkan untuk mengaktifkan acara perubahan ketika perpustakaan Anda mengubah nilai input "di luar" model deklaratif React? Seperti itu dilakukan di @test-library/react?

Ini akan memungkinkan dukungan komponen Material-UI yang mengandalkan elemen input asli, untuk yang lain, seperti Slider, pembungkus khusus masih diperlukan. Slider memiliki prop nilai tetapi tanda tangan onChange berbeda dari input asli. Saya pikir akan sangat bagus untuk melihat perpustakaan integrasi seperti yang kita miliki untuk perpustakaan formulir lainnya: #15585.

Saya bertanya-tanya mengapa masalah ini mendapat begitu banyak suara positif, saya pikir saya telah mengetahuinya :

https://react-hook-form.com/advanced-usage#ControlledmixedwithUncontrolledComponents

hai @oliviertasinari , terima kasih telah melihat lebih dekat masalah ini lagi 👍

Katakanlah saya seorang pengembang Bereaksi yang membangun input khusus, dan saya ingin menata elemen secara berbeda ketika diisi/kosong, bagaimana saya harus menerapkan ini? Tampaknya tidak ada acara perubahan yang dipecat.

Saya akan mencari pemilih CSS untuk solusi dalam proyek saya sendiri yang menggunakan input asli, misalnya: pilih elemen yang memiliki nilai kosong dan tampilkan gaya. Alternatif saya akan menggunakan react-hook-form watch API untuk mendeteksi nilai kosong dan diturunkan sebagai prop (dengan komponen input terbungkus saya).

Sudahkah Anda mempertimbangkan untuk mengaktifkan acara perubahan ketika perpustakaan Anda mengubah nilai input "di luar" model deklaratif React? Seperti itu dilakukan di @test-library/react?

Ya, kami cukup banyak melakukannya di bawah react-hook-form-input . 😄

Saya percaya pada komponen yang tidak terkontrol untuk bentuk bangunan setelah bertahun-tahun bentuk bangunan dikendalikan, itu benar-benar membuat segalanya lebih mudah. Ini mungkin tidak menyelesaikan setiap kasus tepi (jika Anda bekerja di Facebook LOL) tetapi tentu saja membuat kehidupan kerja saya dan orang lain di sekitar saya lebih mudah dalam hal membuat formulir. Input HTML sendiri adalah stateful dan saya ingin merangkulnya di lib ini (tidak mengatakan itu benar atau salah, tetapi solusi alternatif).

Saya sangat suka membangun aplikasi React, dan itulah mengapa membangun banyak paket di sekitarnya. Saya mengerti Bereaksi untuk merangkul komponen yang dikendalikan. Namun, react-hook-form tidak memblokir pengembang dari membuat formulir terkontrol, karena Anda masih dapat melakukan kustom register di useEffect .

Kesimpulan:

Saya pikir kami dapat menyelesaikan masalah ini dan saya akan menghapus tautan di situs web saya yang terkait dengan masalah ini. Selain itu, dapatkah saya memperbarui halaman ini untuk memasukkan react-hook-form-input ?

https://material-ui.com/components/text-fields/#complementary -projects

Ya, kami cukup banyak melakukannya di bawah react-hook-form-input.

@ bluebill1049 Kedengarannya seperti pendekatan yang berlawanan dengan saran saya. Saya memahami hal-hal berikut:

• reaksi-kait-bentuk:
  
  
  
  1. Itu melacak node DOM input. Ketika perlu mengubah nilainya, ia melakukannya input.value = 'x' . Ini bermasalah untuk React, karena tidak ada cara untuk mengetahui bahwa nilai input telah berubah. Misalnya, tidak ada peristiwa perubahan yang dipicu .
  
  
  2. Karena react-hook-form perlu mendengarkan perubahan nilai input, ini menetapkan pendengar acara "input" pada input . Ini bermasalah untuk perpustakaan Anda karena perubahan oleh React tidak memicu peristiwa apa pun ketika nilainya berubah dari input yang dikontrol .
  
  
• react-hook-form-input: library mengontrol input untuk mengatasi dua batasan sebelumnya dari react-hook-form (i dan ii).

Mengingat bahwa 1. sangat tidak mungkin React akan bermain dengan baik untuk mendukung pendekatan react-hook-form dan 2. react-hook-form tidak bekerja di luar kotak dengan input terkontrol dan pseudo-tidak terkontrol (yang mengubah nilai default dan yang hanya mendengarkan onChange), saya akan mengusulkan bahwa:

1. react-hook-form menambal masalah terkontrol dan pseudo tidak terkontrol secara internal. Pada dasarnya, Anda perlu menyelesaikan i. dan ii. (lihat solusi yang diusulkan dalam kode dan kotak tertaut: dispatch + defineProperty).
2. Material-UI mencari bantuan dari komunitas untuk menyediakan adaptor untuk react-hook-form, bila diperlukan (terkait dengan #15585).
3. Kami menutup masalah ini

terima kasih, @oliviertasinari untuk jawaban detailnya. Saya akan melakukan penyelidikan lebih lanjut dengan solusi yang Anda usulkan :)

Saya percaya sebagian besar masalah yang Anda sebutkan di atas dengan React adalah ketika Anda mengganti komponen terkontrol yang merupakan bagian yang ingin saya tingkatkan.

Hanya untuk menjadi jelas:

• Untuk mereproduksi masalah perubahan , buka https://codesandbox.io/s/heuristic-galileo-1wf8c dan klik tombol => log yang hilang. Sekarang, buka https://codesandbox.io/s/silly-allen-72zz7 dan lihat bagaimana pendekatan pengiriman menyelesaikan masalah.
• Untuk mereproduksi masalah perubahan nilai , buka https://codesandbox.io/s/elastic-agnesi-osuuy dan klik tombol => log yang hilang. Sekarang, buka https://codesandbox.io/s/sparkling-rain-3rebh dan lihat bagaimana pendekatan Object.defiendProperty memecahkan masalah.

Jadi saya cukup yakin Anda bisa menyelesaikannya dalam bentuk reaksi-kait. Kami akan sangat menghargai jika Anda dapat mencoba/menerapkan perbaikan ini dan menghapus kesalahan di pihak kami dari dokumentasi Anda .

Perubahan ini akan sangat membantu dengan daya tarik perpustakaan formulir Anda, saya harap Anda akan menghargainya :D.

Saya percaya sebagian besar masalah yang Anda sebutkan di atas dengan React adalah ketika Anda beralih dari komponen yang tidak terkontrol ke terkontrol atau terkontrol yang merupakan bagian yang ingin saya tingkatkan.

Bereaksi memperingatkan ketika pengguna beralih antara tidak terkontrol dan terkontrol. Saya tidak mengerti maksud Anda.

Jadi saya cukup yakin Anda bisa menyelesaikannya dalam bentuk reaksi-kait. Kami akan sangat menghargai jika Anda dapat mencoba/menerapkan perbaikan ini dan menghapus kesalahan di pihak kami dari dokumentasi Anda .

JANGAN SALAHKAN MUI haha, aku cinta MUI (dengan bintang kecilku ️). Seperti yang Anda ketahui, react-hook-form adalah anak baru di kota, saya mencoba untuk mendapatkan perhatian atau momentum pada masalah tertentu. Saya minta maaf jika Anda menemukan cara itu (menyalahkan). sekali lagi terima kasih banyak atas bantuan dan penyelidikan Anda.

(Tidak Menyalahkan)

Saya percaya sebagian besar masalah yang Anda sebutkan di atas dengan React adalah ketika Anda beralih dari komponen yang tidak terkontrol ke terkontrol atau terkontrol yang merupakan bagian yang ingin saya tingkatkan.

Bereaksi memperingatkan ketika pengguna beralih antara tidak terkontrol dan terkontrol. Saya tidak mengerti maksud Anda.

maaf maksud saya komponen yang dikontrol :) memperbaiki komentar saya

@bluebill1049 Luar biasa :)

terima kasih banyak, @olivietassinari (Anda sangat baik)

Perhatikan bahwa Material-UI dapat menerapkan perbaikan yang diusulkan yang sama tetapi saya tidak berpikir bahwa kita harus melakukannya, itu akan memiliki dua kelemahan: 1. itu hanya akan bekerja dengan Material-UI, upaya yang sama perlu dilakukan berulang-ulang. 2. kepemilikan "peretasan" ini harus tetap dalam bentuk kait-reaksi karena berasal dari pertukaran yang diambil perpustakaan (melewati API React idiomatik).

Hai teman-teman, kalau-kalau ada yang masuk ke masalah ini. (Kami telah diam-diam mengerjakan ini untuk sementara waktu )

Kami sedang mengerjakan versi utama berikutnya untuk RHF, yang memiliki beberapa pembaruan kualitas hidup, terutama di sekitar komponen yang dikontrol. Kami akan memiliki dukungan yang lebih baik untuk perpustakaan UI. Kode berikut akan menyelesaikan setValue dan defaultValue untuk perpustakaan UI terkontrol sambil tetap mempertahankan rendering ulang minimum di tingkat Aplikasi/Formulir Anda, rendering ulang akan diisolasi di tingkat komponen Input Anda.

Berikut ini adalah sintaks ketika Anda menggunakan V4 dari RHF.

import TextField from '@material-ui/core/TextField';

const { control } = useForm();

<Controller as={TextField} control={control} name="firstName" rules={{ required: true }} />

Butuh bantuan.
Saya mengalami masalah dengan bidang teks materi (mungkin mui lain juga).
Ketika bidang teks kosong, keystore pertama lambat, hal yang sama berlaku ketika Anda mengubah nilainya menjadi kosong.
Untuk beberapa alasan, itu merender ulang seluruh formulir.

CATATAN CEPAT : Saya mengetik cepat, tanpa penundaan. mereka menunda sebagian karena alasan yang disebutkan di atas.

Hai teman-teman, masalah ini tetap ada meskipun saya menggunakan Controller dari react-hook-form :(
Bisakah masalah ini dibuka kembali? Atau apakah saya salah melakukannya?

Contoh: https://codesandbox.io/s/example-muitextfield-setvalue-with-react-hook-form-kqwq0?file=/index.js

Sunting: Solusi yang saya gunakan adalah InputLabelProps={isEdition && { shrink: isEdition }}
di mana isEdition adalah bendera yang saya gunakan di layar edit.

@Luccasoli tolong lihat dokumen: https://react-hook-form.com/api#Controller

Ada contoh dengan contoh MUI: https://codesandbox.io/s/react-hook-form-controller-079xx

Maaf @ bluebill1049 , tetapi saya tidak menemukan situasi serupa dalam contoh ini, dan dalam dokumentasi saya tidak dapat menemukan prop apa pun yang dapat menyelesaikan masalah ini dengan benar :(

@Luccasoli lihat di defaultValue

Saya mencoba:

• Saya mencoba mengubah defaultValues ​​di dalam useForm() menjadi nilai status, dan mengatur status itu di dalam useEffect()
• saya mencoba menggunakan ide yang sama, tetapi di defaultValue prop langsung setiap Controller

Dalam kedua cara, textField tidak mengenali bahwa input telah diisi, dan label tetap di atas input

https://codesandbox.io/s/example-muitextfield-setvalue-with-react-hook-form-ijxfp

Ya, tapi anehnya mempertahankan defaultValue seperti itu, saya selalu mencoba memulai dengan nilai string kosong agar tidak menunjukkan nilai aneh kepada pengguna.

Saya bahkan dapat menampilkan "Memuat" defaultValue, tetapi nilai awal yang kosong masih tampak lebih menarik, menurut Anda apakah itu mungkin?

Sunting: ya, bekerja dengan string kosong juga ... hahaha, terima kasih, saya bersumpah saya telah mencoba ini sebelumnya, tetapi sepertinya begitu.

@ bluebill1049 Saya mengubah demo Anda untuk menunjukkan masalah yang saya lihat dan semoga Anda memiliki solusi yang baik.
https://codesandbox.io/s/react-hook-form-controller-n196b?file=/src/index.js
Mencoba memvalidasi kotak centang dicentang sebelum mengaktifkan tombol. Semua bidang lain yang saya gunakan berfungsi seperti yang diharapkan kecuali untuk kotak centang.

Saya menemukan kotak pasir ini sangat berguna untuk Material UI - Ada contoh untuk slider, Select dan beberapa lainnya.
https://codesandbox.io/s/react-hook-form-controller-079xx?file=/src/index.js