Material-ui: प्रतिक्रिया-हुक-फॉर्म के साथ कार्य करना

मैंने waiting for users upvotes टैग जोड़ा है। मैं इस मुद्दे को बंद कर रहा हूं क्योंकि हमें यकीन नहीं है कि लोग इस तरह के समर्थन की तलाश कर रहे हैं। तो कृपया इस मुद्दे को अपवोट करें यदि आप हैं। हम अपवोट की संख्या के आधार पर अपने प्रयास को प्राथमिकता देंगे।

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

बहुत जरूरी: प्रार्थना :: प्रार्थना :: प्रार्थना: कोई कामकाज?

बहुत जरूरी!

निश्चित रूप से जरूरत है।

समाधान क्या होगा इसका कोई विचार?

मैं कुछ विशिष्ट के बारे में निश्चित नहीं हूं लेकिन मुझे पता है कि मैंने दोनों पुस्तकालयों का उपयोग करना शुरू कर दिया है और मैं वास्तव में दोनों के बीच सख्त एकीकरण देखना चाहता हूं। रिएक्ट हुक फॉर्म और मटेरियल यूआई एक साथ बहुत अच्छे हैं। टाइपस्क्रिप्ट के लिए उनका समर्थन भी अच्छा है।

अरे, @oliviertassinari इसे देखने के लिए धन्यवाद। ऐसा लगता है कि एमयूआई TextField अब देशी इनपुट के एपीआई के साथ बेहतर काम कर रहा है! यह वाकई बहुत अच्छा है। जब आप e.target.value = 'xxx' आह्वान करते हैं तो हमारे पास टेक्स्ट के ऊपर प्लेसहोल्डर टेक्स्ट ओवरले हुआ करता था। मैं

https://codesandbox.io/s/react-hook-form-conditional-fields-delete-1frsm
ऊपर दिए गए उदाहरण में <Switch /> को reset API लागू करने के बाद रीसेट नहीं किया गया।

यह वास्तव में अच्छा होगा यदि हमारे पास मूल फॉर्म इनपुट एपीआई का समर्थन करने के लिए सभी फॉर्म संबंधित घटक हो सकते हैं (इनपुट के संदर्भ के माध्यम से मान सेट और रीसेट करें) मैं समझता हूं कि यह काम का एक बड़ा टुकड़ा है और प्रतिक्रिया-हुक-फॉर्म जैसे छोटे lib का समर्थन करने के लिए है कुछ विचार किया जाना चाहिए (शायद तब तक जब तक कि लिब अधिक लोकप्रिय न हो ❤️)

फिर से मैं इस मुद्दे को देखने के लिए आपके समय और प्रयास की सराहना करता हूं (एक विशाल ओपन सोर्स प्रोजेक्ट बनाए रखें जैसे कि एमयूआई मेरे लिए पागल है और आप रिएक्ट समुदाय के लिए एक अद्भुत काम कर रहे हैं)। इसके अलावा, मुझे बताएं कि क्या मैं एमयूआई के साथ भी काम करने के लिए अपने स्तर पर काम कर सकता हूं।

चियर्स
विपत्र

@ bluebill1049 इसे

धन्यवाद, @oliviertassinari को फिर से खोलने और इस मुद्दे को देखने के लिए। 🙏 हाँ, आप सही कह रहे हैं react-hook-form अभी भी शहर में एक नया लड़का है और यदि आप कुछ और समय इंतजार करना चाहते हैं तो यह देखने के लिए कि क्या अधिक उपयोगकर्ता react-hook-form को अपना रहे हैं, आपके पास अभिनय नहीं है, जो मुझे लगता है कि यह पूरी तरह से उचित है (यहां तक ​​​​कि मेरे दिल के अंदर भी मैं इसे एमयूआई के साथ काम करने के लिए बेताब हूं, हाहा स्वार्थी रहा)। इस बीच, मैं इनपुट की एक तालिका बनाउंगा जो बॉक्स के बाहर react-hook-form के साथ संगत है (शायद कोड और बॉक्स के साथ भी) मैं इसे यहां भी पोस्ट करूंगा।

अगर चीजें प्रतिक्रिया-हुक-फॉर्म के साथ अच्छी तरह से काम करती हैं और उपयोग बड़ा हो रहा है, तो शायद हम देशी इनपुट एपीआई के साथ काम करने पर विचार कर सकते हैं (जो कि पर्दे के पीछे हुक फॉर्म का उपयोग करता है) input प्राप्त करना बहुत अच्छा होगा, select , radio और checkbox काम कर रहे हैं क्योंकि वे फॉर्म के लिए प्राथमिक उपयोग हैं।

एफवाईआई @oliviertassinari मैं https://github.com/react-hook-form/react-hook-form-input

डिफ़ॉल्ट डेटा को रीसेट करने और लोड करने में भी समस्या का सामना करना पड़ रहा है। कृपया इस मुद्दे पर गौर करें। या कम से कम अभी के लिए एक कामकाज प्रदान करें।

अरे @raikusy कृपया उस लिंक को देखें जिसे मैंने ऊपर पोस्ट किया है, मुझे लगता है कि यह आपकी मदद करेगा। लंबे समय में यह एमयूआई घटक के लिए मूल रूप एपीआई 'रीसेट' का समर्थन करने और घटक 'रेफरी' के माध्यम से अद्यतन मूल्य का समर्थन करने के लिए बहुत अच्छा होगा, लेकिन यह काम की एक बड़ी कीमत है जो मुझे यकीन है कि एमयूआई में बहुत सारी सुविधाएं और विचार हैं जो अधिक महत्वपूर्ण हैं। जैसा कि हमने ऊपर चर्चा की जब तक रिएक्ट हुक फॉर्म मुख्यधारा का काम नहीं हो जाता या लोकप्रिय नहीं हो जाता, तब तक एमयूआई समाधान के लिए जांच शुरू कर देगा। आशा है कि ये समझ में आएंगे :) रिएक्ट हुक फॉर्म का भी उपयोग करने के लिए धन्यवाद ❤️🤩🤟🏻

एफवाईआई कि रैपर घटक अभी भी आपके फॉर्म को 0 पुन: प्रस्तुत करने में सक्षम करेगा। क्योंकि इनपुट स्टेट अपडेट को रैपर कंपोनेंट में अलग किया जाता है।🤩🤟🏻💃

धन्यवाद @ bluebill1049 यह बहुत अच्छा लग रहा है। मेरे पास एक शर्त है जहां प्रोप से डेटा पास होने पर फॉर्म फ़ील्ड का डिफ़ॉल्ट मान होगा। तो क्या टेक्स्टफिल्ड घटक उपरोक्त समाधान के साथ भी काम करेगा? इसके अलावा, मैं फॉर्म में प्रोप के साथ डिफ़ॉल्ट मानों को पारित करने के किसी भी बेहतर उदाहरण की तलाश में था। फ़ॉर्म को पहले से ही माउंट किए जाने के बाद प्रॉप्स कभी-कभी एपीआई कॉल से आ सकता है।

@raikusy आपको रैपर कंपोनेंट के साथ रीसेट/सेटवैल्यू एपीआई का उपयोग करने में सक्षम होना चाहिए।
रीसेट: पूरे फॉर्म के लिए -> https://react-hook-form.com/api#setValue
सेटवैल्यू: व्यक्तिगत के लिए -> https://react-hook-form.com/api#reset

मुझे RHF के साथ काम करने के लिए <Slider /> नहीं मिल सकता।

इसका उपयोग करना पसंद है:

      <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>

मुझे निम्नलिखित त्रुटि मिलती है:

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 ऐसा लगता है कि स्लाइडर वैल्यू प्रॉप्स का समर्थन नहीं करता है :( मैं इस पर कुछ जांच करूंगा। इस बीच, आपको कस्टम रजिस्टर का उपयोग करना पड़ सकता है, जो useEffect पर रजिस्टर है।

बहुत बहुत धन्यवाद @bluebill1049

मैंने कुछ इस तरह बनाना समाप्त कर दिया:

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;

यह अपेक्षा के अनुरूप काम करता है।

इसकी भी बहुत जरूरत है

लंबे समय में यह एमयूआई घटक के लिए मूल रूप एपीआई 'रीसेट' का समर्थन करने और घटक 'रेफरी' के माध्यम से अद्यतन मूल्य का समर्थन करने के लिए बहुत अच्छा होगा।

@ bluebill1049 क्या यह रिएक्ट या रिएक्ट-हुक-फॉर्म के साथ कोई समस्या नहीं है? एक डेवलपर को प्रतिक्रिया-हुक-फॉर्म के साथ इनपुट स्थिति परिवर्तन के लिए "प्रतिक्रिया" कैसे करनी चाहिए?
मान लीजिए कि मैं एक कस्टम इनपुट का निर्माण करने वाला एक रिएक्ट डेवलपर हूं, और जब यह भरा/खाली हो तो मैं तत्व को अलग तरह से स्टाइल करना चाहता हूं, मुझे इसे कैसे कार्यान्वित करना चाहिए? ऐसा लगता है कि कोई भी परिवर्तन घटना कभी भी सक्रिय नहीं होती है।

जब आपकी लाइब्रेरी रिएक्ट के घोषणात्मक मॉडल के "बाहर" इनपुट मान को बदल देती है, तो क्या आपने एक परिवर्तन घटना को सक्रिय करने पर विचार किया है? जैसे यह @ टेस्ट-लाइब्रेरी/प्रतिक्रिया में किया गया है?

यह सामग्री-यूआई घटकों के समर्थन को सक्षम करेगा जो मूल इनपुट तत्वों पर भरोसा करते हैं, अन्य के लिए, स्लाइडर की तरह, एक कस्टम रैपर की अभी भी आवश्यकता होगी। स्लाइडर का एक मूल्य प्रोप है लेकिन ऑनचेंज का हस्ताक्षर मूल इनपुट से अलग है। मुझे लगता है कि एकीकरण पुस्तकालय को देखना बहुत अच्छा होगा क्योंकि हमारे पास अन्य फॉर्म पुस्तकालयों के लिए है: # 15585।

मैं सोच रहा था कि इस मुद्दे को इतने सारे वोट क्यों मिले, मुझे लगता है कि मुझे पता चला है 🙃:

https://react-hook-form.com/advanced-usage#ControlledmixedwithUnनियंत्रित कॉम्पोनेंट्स

अरे @oliviertassinari , इस मुद्दे को फिर से करीब से देखने के लिए धन्यवाद

मान लीजिए कि मैं एक कस्टम इनपुट का निर्माण करने वाला एक रिएक्ट डेवलपर हूं, और जब यह भरा/खाली हो तो मैं तत्व को अलग तरह से स्टाइल करना चाहता हूं, मुझे इसे कैसे कार्यान्वित करना चाहिए? ऐसा लगता है कि कोई भी परिवर्तन घटना कभी भी सक्रिय नहीं होती है।

मैं अपने स्वयं के प्रोजेक्ट में समाधान के लिए सीएसएस चयनकर्ता की तलाश करूंगा जो मूल इनपुट का उपयोग कर रहा है, उदाहरण के लिए: एक तत्व का चयन करें जिसमें एक खाली मूल्य है और एक शैली प्रदर्शित करें। एक विकल्प मैं खाली मूल्य का पता लगाने के लिए प्रतिक्रिया-हुक-फॉर्म watch एपीआई का उपयोग करूंगा और prop (मेरे लिपटे इनपुट घटक के साथ) के रूप में पास करूंगा।

जब आपकी लाइब्रेरी रिएक्ट के घोषणात्मक मॉडल के "बाहर" इनपुट मान को बदल देती है, तो क्या आपने एक परिवर्तन घटना को सक्रिय करने पर विचार किया है? जैसे यह @ टेस्ट-लाइब्रेरी/प्रतिक्रिया में किया गया है?

हाँ, हम इसे काफी हद तक react-hook-form-input तहत कर रहे हैं। मैं

मैं कई वर्षों के बिल्डिंग फॉर्म को नियंत्रित करने के बाद फॉर्म के निर्माण के लिए अनियंत्रित घटकों में विश्वास करता हूं, यह वास्तव में चीजों को बहुत आसान बनाता है। यह हर किनारे के मामले को हल नहीं कर सकता है (यदि आप फेसबुक एलओएल पर काम कर रहे हैं) लेकिन यह निश्चित रूप से मेरे काम के जीवन को और मेरे आस-पास के अन्य लोगों को फॉर्म बनाने के लिए आसान बनाता है। HTML इनपुट स्वयं स्टेटफुल हैं और मैं उन्हें इस काम में शामिल करना पसंद करूंगा (यह सही या गलत नहीं है, बल्कि एक वैकल्पिक समाधान है)।

मुझे रिएक्ट एप्लिकेशन बनाना बहुत पसंद है, और इसीलिए इसके चारों ओर बहुत सारे पैकेज बनाना। मैं नियंत्रित घटकों को अपनाने के लिए प्रतिक्रिया को समझता हूं। हालांकि, प्रतिक्रिया-हुक-फार्म, फार्म नियंत्रित निर्माण से डेवलपर्स को अवरुद्ध नहीं कर रहा है क्योंकि आप अभी भी कस्टम कर सकते हैं register पर useEffect ।

निष्कर्ष:

मुझे लगता है कि हम इस मुद्दे को बंद कर सकते हैं और मैं इस मुद्दे से संबंधित अपनी वेबसाइट पर लिंक को हटा दूंगा। इसके अलावा, क्या मैं इस पेज को react-hook-form-input शामिल करने के लिए अपडेट कर सकता हूं?

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

हाँ, हम इसे प्रतिक्रिया-हुक-फॉर्म-इनपुट के तहत बहुत ज्यादा कर रहे हैं।

@ bluebill1049 यह मेरे सुझाव के विपरीत दृष्टिकोण की तरह लगता है। मैं निम्नलिखित को समझता हूं:

• प्रतिक्रिया-हुक-रूप:
  
  
  
  1. यह इनपुट डोम नोड्स का ट्रैक रखता है। जब इसे मान बदलने की आवश्यकता होती है, तो यह input.value = 'x' । यह प्रतिक्रिया के लिए समस्याग्रस्त है, क्योंकि यह जानने का कोई तरीका नहीं है कि इनपुट मान बदल गया है। उदाहरण के लिए, कोई परिवर्तन घटना ट्रिगर नहीं होती है ।
  
  
  2. क्योंकि प्रतिक्रिया हुक फार्म की जरूरत इनपुट मूल्य बदलावों को सुनने, यह एक "इनपुट" घटना श्रोता सेट इनपुट पर । यह आपके पुस्तकालय के लिए समस्याग्रस्त है क्योंकि प्रतिक्रिया द्वारा परिवर्तन किसी भी घटना को ट्रिगर नहीं करता है जब मान एक नियंत्रित इनपुट से बदलता है ।
  
  
• प्रतिक्रिया-हुक-फॉर्म-इनपुट: पुस्तकालय प्रतिक्रिया-हुक-फॉर्म (i और ii) की दो पिछली सीमाओं के आसपास काम करने के लिए इनपुट को नियंत्रित करता है।

यह देखते हुए कि 1. यह बहुत कम संभावना है कि प्रतिक्रिया प्रतिक्रिया-हुक-फॉर्म दृष्टिकोण का समर्थन करने के लिए अच्छी तरह से खेलेंगे और 2. वह प्रतिक्रिया-हुक-फॉर्म नियंत्रित और छद्म-अनियंत्रित इनपुट के साथ बॉक्स के बाहर काम नहीं करता है (वे जो बदलते हैं डिफ़ॉल्ट मान और वे जो केवल ऑन चेंज को सुनते हैं), मैं प्रस्तावित करता हूं कि:

1. प्रतिक्रिया-हुक-फॉर्म आंतरिक रूप से नियंत्रित और छद्म अनियंत्रित समस्या को पैच करता है। मूल रूप से, आपको i को हल करने की आवश्यकता है ii. (लिंक किए गए कोडसैंडबॉक्स में प्रस्तावित समाधान देखें: डिस्पैच + डिफाइनप्रॉपर्टी)।
2. सामग्री-यूआई जरूरत पड़ने पर (#15585 से संबंधित) प्रतिक्रिया-हुक-फॉर्म के लिए एडेप्टर प्रदान करने के लिए समुदाय से सहायता चाहता है।
3. हम इस मुद्दे को बंद करते हैं

धन्यवाद, विस्तृत उत्तर के लिए @oliviertassinari । मैं आपके प्रस्तावित समाधानों के साथ कुछ और जांच करूंगा :)

मेरा मानना ​​​​है कि आपने रिएक्ट के साथ ऊपर बताए गए अधिकांश मुद्दे तब हैं जब आप नियंत्रित घटकों को स्विच करते हैं, जो कि वह हिस्सा है जिसे मैं सुधारना चाहता हूं।

केवल स्पष्ट करने के लिए:

• ऑन चेंज इश्यू को पुन: पेश करने के लिए, https://codesandbox.io/s/heuristic-galileo-1wf8c पर जाएं और बटन => मिसिंग लॉग पर क्लिक करें। अब, https://codesandbox.io/s/silly-allen-72zz7 पर
• मूल्य परिवर्तन के मुद्दे को पुन: उत्पन्न करने के लिए, https://codesandbox.io/s/elastic-agnesi-osuuy पर जाएं और बटन => लापता लॉग पर क्लिक करें। अब, https://codesandbox.io/s/sparkling-rain-3rebh पर

तो मुझे पूरा यकीन है कि आप इसे प्रतिक्रिया-हुक-रूप में हल कर सकते हैं। हम इसकी सराहना करेंगे यदि आप इन सुधारों को आजमा सकते हैं/तैनात कर सकते हैं और अपने दस्तावेज़ीकरण से हमारी ओर से दोष हटा सकते हैं ।

इन परिवर्तनों को वास्तव में आपकी फॉर्म लाइब्रेरी के कर्षण में मदद करनी चाहिए, मुझे आशा है कि आप इसकी सराहना करेंगे: डी।

मेरा मानना ​​​​है कि रिएक्ट के साथ आपके द्वारा ऊपर बताई गई अधिकांश समस्या तब होती है जब आप अनियंत्रित से नियंत्रित या नियंत्रित घटकों पर स्विच करते हैं, जो कि वह हिस्सा है जिसे मैं सुधारना चाहता हूं।

जब उपयोगकर्ता अनियंत्रित और नियंत्रित के बीच स्विच करता है तो प्रतिक्रिया चेतावनी देती है। मुझे आपकी बात समझ में नहीं आ रही है।

तो मुझे पूरा यकीन है कि आप इसे प्रतिक्रिया-हुक-रूप में हल कर सकते हैं। हम इसकी सराहना करेंगे यदि आप इन सुधारों को आजमा सकते हैं/तैनात कर सकते हैं और अपने दस्तावेज़ीकरण से हमारी ओर से दोष हटा सकते हैं ।

नहीं, मैं एमयूआई को दोष दे रहा हूं, मुझे एमयूआई पसंद है (मेरे छोटे सितारे के साथ ️)। जैसा कि आप जानते हैं, प्रतिक्रिया-हुक-रूप शहर में एक नया लड़का है, मैं विशेष मुद्दे पर कुछ ध्यान या गति प्राप्त करने की कोशिश कर रहा था। अगर आपको ऐसा लगता है (दोष) तो मैं माफी मांगता हूं। आपकी मदद और जांच के लिए फिर से बहुत बहुत धन्यवाद।

(दोष नहीं)

मेरा मानना ​​​​है कि रिएक्ट के साथ आपके द्वारा ऊपर बताई गई अधिकांश समस्या तब होती है जब आप अनियंत्रित से नियंत्रित या नियंत्रित घटकों पर स्विच करते हैं, जो कि वह हिस्सा है जिसे मैं सुधारना चाहता हूं।

जब उपयोगकर्ता अनियंत्रित और नियंत्रित के बीच स्विच करता है तो प्रतिक्रिया चेतावनी देती है। मुझे आपकी बात समझ में नहीं आ रही है।

क्षमा करें मेरा मतलब नियंत्रित घटक था :) मेरी टिप्पणी तय की

@ bluebill1049 बहुत बढ़िया :)

बहुत बहुत धन्यवाद, @oliviertassinari (आप बहुत दयालु हैं)

ध्यान दें कि सामग्री-यूआई समान प्रस्तावित सुधारों को लागू कर सकता है लेकिन मुझे नहीं लगता कि हमें चाहिए, इसमें दो कमियां होंगी: 1. यह केवल सामग्री-यूआई के साथ काम करेगा, उसी प्रयास को बार-बार करने की आवश्यकता होगी। 2. इन "हैक्स" का स्वामित्व प्रतिक्रिया-हुक-रूप में रहना चाहिए क्योंकि यह पुस्तकालय द्वारा लिए गए ट्रेडऑफ़ से उत्पन्न होता है (मुहावरेदार प्रतिक्रिया एपीआई को छोड़कर)।

अरे दोस्तों, अगर कोई इस मुद्दे पर कदम रखता है। (हम कुछ समय से गुप्त रूप से इस पर काम कर रहे हैं )

हम आरएचएफ के लिए अगले प्रमुख संस्करण पर काम कर रहे हैं, जिसमें कुछ गुणवत्ता वाले जीवन अद्यतन हैं, विशेष रूप से नियंत्रित घटक के आसपास। यूआई लाइब्रेरी के लिए हमारे पास बेहतर सपोर्ट होगा। निम्न कोड नियंत्रित UI लाइब्रेरी के लिए setValue और defaultValue को हल करेगा, जबकि आपके ऐप/फॉर्म स्तर पर न्यूनतम री-रेंडर बनाए रखेगा, री-रेंडर आपके इनपुट घटक स्तर पर अलग हो जाएगा।

जब आप RHF के V4 का उपयोग कर रहे हों तो निम्नलिखित सिंटैक्स होगा।

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

const { control } = useForm();

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

मदद की ज़रूरत है।
मुझे सामग्री के टेक्स्टफील्ड (शायद अन्य मुई भी) के साथ कोई समस्या है।
जब टेक्स्टफील्ड खाली होता है तो पहला कीस्टोर धीमा होता है, वही तब होता है जब आप मान को खाली में बदलते हैं।
किसी कारण से, यह पूरे फॉर्म को फिर से प्रस्तुत करता है।

त्वरित नोट : मैं बिना किसी देरी के तेजी से टाइप कर रहा हूं। वे ऊपर बताए गए कारण के कारण भाग में देरी करते हैं।

हाय दोस्तों, यह समस्या तब भी बनी रहती है जब मैं प्रतिक्रिया-हुक-फॉर्म से नियंत्रक का उपयोग करता हूं :(
क्या इस मुद्दे को फिर से खोला जा सकता है? या मैं इसे गलत कर रहा हूँ?

उदाहरण: https://codesandbox.io/s/example-muitextfield-setvalue-with-react-hook-form-kqwq0?file=/index.js

संपादित करें: एक समाधान जिसका मैं उपयोग कर रहा हूं वह है InputLabelProps={isEdition && { shrink: isEdition }}
जहां isEdition एक ध्वज है जिसे मैं संपादन स्क्रीन पर उपयोग कर रहा हूं।

@Luccasoli कृपया डॉक्टर को देखें: https://react-hook-form.com/api#Controller

एमयूआई उदाहरणों के साथ एक उदाहरण है: https://codesandbox.io/s/react-hook-form-controller-079xx

क्षमा करें @ bluebill1049 , लेकिन मुझे इस उदाहरण में ऐसी कोई स्थिति नहीं मिली, और दस्तावेज़ीकरण में मुझे ऐसा कोई प्रोप नहीं मिला जो इस समस्या को ठीक से हल कर सके :(

@Luccasoli defaultValue पर एक नज़र डालें

मैंने कोशिश की:

• मैंने डिफ़ॉल्ट मानों को useForm() एक राज्य मान के अंदर बदलने का प्रयास किया, और उस राज्य को useEffect() के अंदर सेट किया
• मैंने एक ही विचार का उपयोग करने की कोशिश की, लेकिन डिफ़ॉल्ट रूप से प्रत्येक नियंत्रक को सीधे प्रोप करें

दोनों तरीकों से, टेक्स्टफिल्ड यह नहीं पहचानता है कि इनपुट भरा हुआ है, और लेबल इनपुट पर रहता है

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

हां, लेकिन यह अजीब है कि एक डिफ़ॉल्ट वैल्यू रखें, मैं हमेशा खाली स्ट्रिंग मान से शुरू करने का प्रयास करता हूं ताकि उपयोगकर्ता को अजीब मान न दिखाया जा सके।

मैं एक "लोडिंग" डिफॉल्ट वैल्यू भी प्रदर्शित कर सकता था, लेकिन खाली प्रारंभिक मूल्य अभी भी अधिक दिलचस्प लगता है, क्या आपको लगता है कि यह संभव है?

संपादित करें: हाँ, खाली स्ट्रिंग के साथ भी काम करता है ... हाहाहा, धन्यवाद, मैंने कसम खाई थी कि मैंने पहले यह कोशिश की थी, लेकिन ऐसा लगता है।

@ bluebill1049 मैं जो समस्या देख रहा हूं उसे दिखाने के लिए मैंने आपके डेमो में बदलाव किया है और उम्मीद है कि आपके पास एक अच्छा समाधान होगा।
https://codesandbox.io/s/react-hook-form-controller-n196b?file=/src/index.js
एक बटन को सक्षम करने से पहले एक चेकबॉक्स को सत्यापित करने का प्रयास किया जाता है। अन्य सभी फ़ील्ड जिनका मैंने उपयोग किया है वे चेकबॉक्स को छोड़कर अपेक्षित रूप से काम करते हैं।

मैंने पाया कि यह सैंड बॉक्स वास्तव में सामग्री UI के लिए वास्तव में उपयोगी है - स्लाइडर, चयन और कुछ अन्य के लिए उदाहरण हैं।
https://codesandbox.io/s/react-hook-form-controller-079xx?file=/src/index.js