React: चेतावनी को नियंत्रित करने के लिए टाइप रेडियो के अनियंत्रित इनपुट को बदल रहा है ...

को निर्मित 16 मई 2016 · 30टिप्पणियाँ · स्रोत: facebook/react

मेरे पास यह कोड है

       <input name='test' value={1} type='radio' />
       <input name='test' value={2} type='radio' defaultChecked />

https://jsfiddle.net/69z2wepo/42137/

और जब मैं रेडियो पर क्लिक करता हूं तो यह मुझे चेतावनी देता है
चेतावनी: टेस्ट को नियंत्रित करने के लिए टाइप रेडियो के अनियंत्रित इनपुट को बदल रहा है। इनपुट तत्वों को अनियंत्रित से नियंत्रित (या इसके विपरीत) स्विच नहीं करना चाहिए। घटक के जीवनकाल के लिए नियंत्रित या अनियंत्रित इनपुट तत्व का उपयोग करने के बीच का निर्णय लें। अधिक जानकारी: https://fb.me/react-controlled-compenders

तो यह स्पष्ट नहीं है कि यह एक बग क्यों है?

Bug

स्रोत

ButuzGOL

👍4

सबसे उपयोगी टिप्पणी

@LiJinyao

इसका अर्थ है this.state.isMustFill हमेशा true या false , बल्कि true या undefined , उदाहरण के लिए। सुनिश्चित करें कि यह हमेशा बूलियन है, और समस्या दूर हो जाएगी।

gaearon 27 मई 2016

👍137 🎉46 ❤35 😄10 🚀1

सभी 30 टिप्पणियाँ

यह एक बग है। : +1:

मुझे लगता है कि यह बिना सोचे समझे value सेट हो रहा है कि यह एक रेडियो-इनपुट है जो value अलग-अलग उपयोग करता है।

syranide 16 मई 2016

👍2

मेरे पास एक संबंधित मुद्दा है, मुझे चेतावनी मिल रही है कि मैं इस कोड के साथ एक नियंत्रित करने के लिए एक अनियंत्रित घटक स्विच कर रहा हूं:

function CheckboxButton({checked, onChange, textComponent} = {}) {
    return (
        <label className='checkbox-button'>
            <input
                type='checkbox'
                checked={checked}
                onChange={onChange}/>
            {textComponent}
        </label>
    );
}

अगर मैं एक बेकार value प्रोप जोड़ देता हूं तो कोई चेतावनी नहीं है। मुझे लगता है कि चेतावनी कोड को स्वीकार करना चाहिए कि चेकबॉक्स की value संपत्ति यह इंगित नहीं करती है कि यह नियंत्रित है या नहीं, बल्कि checked प्रोप है।

macgyver 19 मई 2016

👍40

cc @zpao @spicyj लगता है जैसे हम यह तय करना चाहते हैं।

syranide 19 मई 2016

हाँ, मैंने कल खुद देखा।

zpao 19 मई 2016

यह बग थोड़ा परेशान करने वाला है। एक बात के लिए, विचार करने के लिए कई अलग-अलग इनपुट प्रकार हैं (https://www.w3.org/TR/html5/forms.html#attr-input-type) और ब्राउज़र कल्पना के संकेत से अधिक प्रकारों का समर्थन करते प्रतीत होते हैं (के लिए) उदाहरण के लिए, मोज़िला https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) के अनुसार "महीना" का समर्थन करता है।

एक रेडियो बटन के विशेष मामले में, यह इस तथ्य से और जटिल है कि आप किसी एकल इनपुट को देखकर किसी समूह की "नियंत्रितता" का निर्धारण नहीं कर सकते हैं। आपको एक ही फॉर्म समूह के भीतर एक ही name प्रोप के साथ सभी इनपुटों को देखने की आवश्यकता है। छी।

बहुत बुरा हम सिर्फ अनियंत्रित घटकों पर प्रतिबंध नहीं लगा सकते हैं। इससे जीवन इतना आसान हो जाएगा। : पी।

jimfb 20 मई 2016

यह बग थोड़ा परेशान करने वाला है। एक बात के लिए, विचार करने के लिए कई अलग-अलग इनपुट प्रकार हैं (https://www.w3.org/TR/html5/forms.html#attr-input-type) और ब्राउज़र कल्पना के संकेत से अधिक प्रकारों का समर्थन करते प्रतीत होते हैं (के लिए) उदाहरण के लिए, मोज़िला https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) के अनुसार "महीना" का समर्थन करता है।

@jimfb यकीन है कि अगर मैं अनुसरण कर रहा है, जहां तक मैं यह समझ के रूप में और यह सिर्फ जाँच के बारे में है का सवाल है कि क्या type="radio" या type="checkbox" और फिर परीक्षण checked के बजाय value , ऐसा लगता है कि value का परीक्षण अभी की परवाह किए बिना किया जा रहा है। अन्य प्रकार वास्तव में मायने नहीं रखते क्योंकि वे सभी value पर भरोसा करते हैं।

एक रेडियो बटन के विशेष मामले में, यह इस तथ्य से और जटिल है कि आप किसी एकल इनपुट को देखकर किसी समूह की "नियंत्रितता" का निर्धारण नहीं कर सकते हैं। आपको एक ही फॉर्म समूह में समान नाम वाले सभी इनपुटों को देखना होगा। छी।

नियंत्रित और अनियंत्रित रेडियो का मिश्रण भी एक समस्या है, लेकिन एक पूरी तरह से अलग समस्या IMHO है। यह चेतावनी बस नियंत्रित और अनियंत्रित होने के बीच एक व्यक्तिगत इनपुट को बदलने के बारे में है। Ie checked को एक व्यक्तिगत घटक पर अशक्त या अशक्त या इसके विपरीत नहीं जाना चाहिए।

बहुत बुरा हम सिर्फ अनियंत्रित घटकों पर प्रतिबंध नहीं लगा सकते हैं। इससे जीवन इतना आसान हो जाएगा। : पी।

मैं अभी भी इस राय पर कायम हूं कि वे पूरी तरह से अलग घटक होने चाहिए।

syranide 20 मई 2016

👍3

im यह भी अनुभव कर रहा है: रेडियो पर क्लिक करना त्रुटि दिखाता है

<div className="radio">
                                        <label>
                                            <input type="radio" name="type" value="In Person" defaultChecked={true} />
                                            <span> In Person</span>
                                        </label>
                                    </div>
                                    <div className="radio margin-left-20">
                                        <label>
                                            <input type="radio" name="type" value="Phone" />
                                            <span> Phone</span>
                                        </label>
                                    </div>
                                    <div className="radio margin-left-20">
                                        <label>
                                            <input type="radio" name="type" value="Webex" />
                                            <span> Webex</span>
                                        </label>
                                    </div>

psimoneau22 20 मई 2016

👍1

@ मुझे लगता है कि यह थोड़ा अधिक जटिल है। इस बारे में सोचें कि आप नियंत्रित और अनियंत्रित रेडियो बटन के बीच स्विच करने के लिए इन चेतावनियों को कैसे लागू करेंगे।

यदि उस प्रपत्र समूह में किसी भी रेडियो इनपुट में checked विशेषता निर्दिष्ट है, तो पूरे समूह को नियंत्रित किया जाता है। रेडियो बटन के लिए प्रति-नोड के आधार पर नियंत्रण को ट्रैक नहीं किया जा सकता है।

jimfb 20 मई 2016

आइए इसे 90% मामले को संभालने के लिए गुंजाइश दें जो सिर्फ यह है कि यह गलत तरीके से चेतावनी दे रहा है। हम इसे किसी और समय को सही बनाने के बारे में चिंता कर सकते हैं।

zpao 20 मई 2016

@ ज़ापो वही है जिसके बारे में मैं बात कर रहा हूं - यह चेतावनी रेडियो बटन के लिए गलत तरीके से (बहुत बार) फायरिंग है।

अगर हम सिर्फ एक त्वरित सुधार चाहते हैं, तो मुझे लगता है कि हमें रेडियो बटन के लिए इस चेतावनी को अक्षम करने की आवश्यकता है। मुझे नहीं लगता कि रेडियो बटन के लिए 90% समाधान है जो कभी-कभार आग की चेतावनी नहीं देगा। एक "सही" फिक्स को प्रत्येक फॉर्म समूह के भीतर सभी रेडियो इनपुट को ट्रैक करने की आवश्यकता होगी।

jimfb 20 मई 2016

प्रारंभिक रिपोर्ट में परीक्षण का मामला चेतावनी है और यह नहीं होना चाहिए। यह इस मामले में रेडियो पर नज़र रखने की आवश्यकता के कारण नहीं है क्योंकि यह गलत है क्योंकि हम value को रेडियो और चेकबॉक्स के लिए देख रहे हैं (यहीं: https://github.com/facebook/react/blob/master /src/renderers/dom/client/wrappers/ReactDOMInput.js#L169-L171)। हमें value वापस नहीं होना चाहिए, हमें यह निर्धारित करने के लिए प्रकार का उपयोग करना चाहिए कि क्या हमें checked या value दिखना चाहिए।

आप एक वास्तविक समस्या के बारे में बात कर रहे हैं लेकिन यह इस एक के लिए स्पर्शरेखा है।

zpao 20 मई 2016

@ ज़ापो राइट, लेकिन तत्वों में से किसी पर भी डिफ़ॉल्ट रूप से सेट करने के लिए एक अनियंत्रित रेडियो समूह की आवश्यकता नहीं है। और एक नियंत्रित रेडियो समूह को एक नियंत्रित तत्व (रीसेट बटन के लिए) पर एक डिफ़ॉल्ट चेक सेट करने की अनुमति है। इसका मतलब यह है कि जब तक हम होशियार तर्क नहीं करते हैं, तब तक हम जो भी जाँच करते हैं, वह गलत है और आगाह कर देगा। हम उस बिंदु पर केवल चेक (रेडियो बटन के लिए) निकाल सकते हैं।

jimfb 20 मई 2016

@ मुझे लगता है कि यह थोड़ा अधिक जटिल है। इस बारे में सोचें कि आप नियंत्रित और अनियंत्रित रेडियो बटन के बीच स्विच करने के लिए इन चेतावनियों को कैसे लागू करेंगे।
यदि उस प्रपत्र समूह के भीतर किसी भी रेडियो इनपुट में निर्दिष्ट विशेषता है, तो पूरे समूह को नियंत्रित किया जाता है। रेडियो बटन के लिए प्रति-नोड के आधार पर नियंत्रण को ट्रैक नहीं किया जा सकता है।

@ जिम्फ हुह? क्या यह नहीं है कि आप रेडियो-बटन https://jsfiddle.net/dt03qw4p/ का उपयोग कैसे करते हैं value , यदि checked शून्य है, तो यह अनियंत्रित है, यदि यह गैर-अशक्त है तो इसे नियंत्रित किया जाता है और सत्यता के आधार पर इसकी जाँच की जाती है या नहीं ... सही है? इस परिदृश्य के लिए अन्य रेडियो की जाँच करने की आवश्यकता नहीं है, बस यह जाँचना है कि क्या checked शून्य से अशक्त या इसके विपरीत (यानी बदलती नियंत्रण) नहीं है।

या मैं क्या याद कर रहा हूँ?

syranide 20 मई 2016

यदि एक नियंत्रित घटक में रेडियो बटन की जाँच नहीं की जाती है तो @syranide क्या आपको checked={false} निर्दिष्ट करने की आवश्यकता है? आज, जवाब नहीं है। हो सकता है कि हम इसे बदल सकते हैं, लेकिन यह एक बहुत व्यापक चर्चा है और लगभग निश्चित रूप से 90% त्वरित फिक्स के दायरे में नहीं है जो @zabao चाहता था।

उदाहरण: यह एक कानूनी (अपरिवर्तनीय) नियंत्रित रूप है:

<form>
  <input type="radio" name="foo" value="1" onChange={()=>{}} />
  <input type="radio" name="foo" value="2" onChange={()=>{}} checked />
  <input type="radio" name="foo" value="3" onChange={()=>{}} />
</form>

जाहिर है कि यह एक विरोधाभासी उदाहरण है। आप कल्पना कर सकते हैं कि उपयोगकर्ता के पास तत्वों की एक सूची है और जो चेक किया गया है उस पर चेक किए गए विशेषता को बस "सेट" करता है। लेकिन नतीजा वही है।

इनपुट की "नियंत्रितता" को प्रपत्र के भीतर पूरे समूह द्वारा परिभाषित किया गया है। एक checked विशेषता की कमी यह जानना अपर्याप्त है कि क्या किसी विशेष इनपुट तत्व को नियंत्रित किया जाता है। इस मामले में, पहले इनपुट की नियंत्रितता दूसरे के नियंत्रण से निर्धारित होती है।

इसलिए यह चेतावनी रेडियो बटन के लिए बहुत मुश्किल है।

jimfb 20 मई 2016

@syranide क्या आपको चेक किए गए घटक = {false} को निर्दिष्ट करने की आवश्यकता है यदि रेडियो बटन को नियंत्रित घटक में चेक नहीं किया गया है? आज, जवाब नहीं है।

@jimfb वास्तव में जवाब एक अर्थ में हां है ...? https://jsfiddle.net/hx2r7bc4/ (आकस्मिक उदाहरण, लेकिन फिर भी)

इसके अलावा, मैं किसी के लिए एक डायनामिक कंट्रोल्ड कंपोनेंट के लिए इसे बहुत अजीब मानूंगा और स्पष्ट रूप से checked सेट नहीं करूंगा (मुझे संदेह है कि आप किसी को भी मिलेगा), इसके अलावा, यह एक चेतावनी है और मूल रूप से चमकने का इरादा है बुरे व्यवहार पर प्रकाश तो मुझे वास्तव में यकीन नहीं है कि क्या मैं इसे किसी भी समस्या पर विचार करूंगा?

उदाहरण: यह एक कानूनी (अपरिवर्तनीय) नियंत्रित रूप है:

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

तो फिर, यह मुझे जीत-जीत के एक मामले की तरह लगता है, अगर आप इसे गलत कर रहे हैं / बुरी तरह से आपको चेतावनी मिलती है। इसे सही नहीं करने वाले को चेतावनी मिलेगी।

शायद मैंने कुछ याद किया है, लेकिन मुझे ऐसा कोई मामला नहीं दिख रहा है जिसमें अच्छी प्रैक्टिस शामिल हो, जो वास्तव में आपको चेतावनी, केवल बुरे लोगों को देखने का कारण बने।

syranide 20 मई 2016

मैं अपनी पहले की टिप्पणी को वापस लेता हूं, यह कल्पना दर्शाता है कि value चेकबॉक्स के लिए एक आवश्यक विशेषता है (भले ही मैं इसका उपयोग करने की योजना नहीं करता हूं)

https://html.spec.whatwg.org/multipage/forms.html#checkbox -state- (टाइप करें = इनबॉक्स)

macgyver 20 मई 2016

सुधार, MDN इंगित करता है कि यह एक आवश्यक विशेषता है: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

कल्पना वास्तव में यह नहीं कहती है कि .. मुझे यकीन नहीं है कि एमडीएन के लिए प्रशस्ति पत्र क्या है, लेकिन यह मुझे गलत लगता है। व्यक्तिगत रूप से मैं बल्कि चेकबॉक्स के लिए value संपत्ति को छोड़ दूंगा, यह ब्राउज़र के लिए पूरी तरह से समझ में आता है कि यदि आवश्यक हो तो यह on या कुछ और के लिए डिफ़ॉल्ट हो।

macgyver 20 मई 2016

दरअसल जवाब एक मायने में हां है ...? https://jsfiddle.net/hx2r7bc4/ (आकस्मिक उदाहरण, लेकिन फिर भी)

वाह, कि बेकार है। यह सबसे भयानक बात है जो मैंने पूरे महीने देखी है। लेकिन मैं आपको इसका श्रेय दूंगा क्योंकि यह एक समस्या को नियंत्रित घटक पर निर्दिष्ट नहीं करने के साथ प्रदर्शित करता है जब सभी मान गलत होते हैं।

इसके अलावा, मैं इसे किसी के लिए बहुत ही अजीब मानूंगा कि किसी के पास एक नियंत्रित घटक है और स्पष्ट रूप से सेट नहीं किया गया है (मुझे संदेह है कि आप किसी को भी ऐसा करेंगे), इसके अलावा, यह एक चेतावनी है और मूल रूप से बुरे व्यवहार पर प्रकाश डालने का इरादा है इसलिए मैं मैं वास्तव में निश्चित नहीं हूँ अगर मैं इसे किसी भी समस्या पर विचार करूँ?

मुझे यकीन नहीं है कि यह अजीब है। यह कुछ डेटा पर लूप के लिए बहुत सहज / स्वाभाविक है और checked IFF सेट करता है डेटा कहता है कि मान की जाँच की गई है (यह मानते हुए कि आप jsx का उपयोग नहीं कर रहे हैं)। मैं यह भी बुरा व्यवहार के बारे में आश्वस्त नहीं हूँ (ऊपर आपकी फिडेल को छोड़कर)।

वैसे भी, मुझे लगता है कि मैं उस व्यवहार पर प्रतिबंध लगाने के साथ ठीक हूं। मुझे लगता है कि काम करेगा।

केवल दूसरे किनारे के मामले में मुझे चिंता होगी कि क्या होता है अगर एक नियंत्रित चेकबॉक्स एक नियंत्रित पाठ इनपुट में बदल जाता है, लेकिन हमारे लिए यह आसान होना चाहिए कि हम सही हो जाएं, हमें बस अपना परिवर्तन करने के बाद इसका परीक्षण करने की आवश्यकता है।

jimfb 21 मई 2016

👍1

मैं यह भी बुरा व्यवहार के बारे में आश्वस्त नहीं हूँ (ऊपर आपकी फिडेल को छोड़कर)।

सिर्फ पद के लिए। हम वास्तविक रूप से checked की अशक्तता से दूर नहीं हो सकते हैं जो वर्तमान डिजाइन के साथ नियंत्रण का निर्धारण करता है। यह देखते हुए कि एक अशक्त checked प्रभावी रूप से अनियंत्रित होने का मतलब है कि मैं कहूंगा कि उन्हें मिश्रण करना गलत है। अब यह सिर्फ इतना होता है कि आप उस पैटर्न पर भरोसा कर सकते हैं जब तक कि एक की हमेशा जांच की जाती है, लेकिन यह सच होने की गारंटी नहीं है। ऐसे मूल्यों का उपयोग किया जा सकता है जो किसी भी रेडियो के अनुरूप नहीं हैं (जरूरी नहीं कि एक त्रुटि हो), अगर आपने इसे "गलत तरीके" से किया तो कुछ रेडियो अभी भी जांचे जाएंगे।

केवल दूसरे किनारे के मामले में मुझे चिंता होगी कि क्या होता है अगर एक नियंत्रित चेकबॉक्स एक नियंत्रित पाठ इनपुट में बदल जाता है, लेकिन हमारे लिए यह आसान होना चाहिए कि हम सही हो जाएं, हमें बस अपना परिवर्तन करने के बाद इसका परीक्षण करने की आवश्यकता है।

IMHO, मुझे लगता है कि मेरे पास इसके बारे में एक पीआर था जो उस घटक के रिमाउंटिंग के समान होगा जिस पर मुझे लगता है कि हर कोई सहमत था लेकिन यह कभी भी समाप्त नहीं हुआ। इसलिए जब तक ऐसा कुछ होता है मैं इसके बारे में भी चिंता नहीं करूंगा, यह आज एक इनपुट के प्रकार को बदलने के लिए एक अर्थ में एक त्रुटि है (अन्य टूटे हुए किनारे-मामले भी हैं AFAIK)।

syranide 21 मई 2016

मेरी भी यही समस्या है। यह मेरा कोड है:

<input type="checkbox" onChange={this.handlerMustfillChange} checked={this.state.isMustFill}/>

और जब मैं चेकबॉक्स पर क्लिक करता हूं तो मुझे वही चेतावनी मिलती है।
चेतावनी .js: 44 चेतावनी: प्रश्नचिन्ह को नियंत्रित करने के लिए टाइप चेकबॉक्स का अनियंत्रित इनपुट बदल रहा है।

LiJinyao 27 मई 2016

@LiJinyao

gaearon 27 मई 2016

👍137 🎉46 ❤35 😄10 🚀1

क्या इस मुद्दे को अभी भी बग के रूप में माना जाएगा?
मैं इसे बिना किसी चेतावनी के defaultChecked साथ defaultValue का उपयोग करने के लिए बदलता हूं।

<input type="radio" name="a" defaultValue="1" defaultChecked/>
<input type="radio" name="a" defaultValue="11"/>

littlee 5 जून 2016

👍9

@ भंग मुझे दोष नहीं है, मैं हमें दोष देता हूं, लेकिन यह सिर्फ भयानक है।

jimfb 9 जून 2016

@gaearon
जब किसी घटक के पास value प्रोप होता है और उसी समय defaultValue (या defaultChecked ) प्रोप होता है, तो यह अनियंत्रित घटक के रूप में माना जाएगा।

मुझे लगता है कि यह स्पष्ट रूप से फॉर्म डॉक्स में उदाहरणों के साथ घोषित किया जाना चाहिए, नोट लिखें, या यह रिएक्टर शुरुआती को गलत समझेगा।

Plortinus 28 अक्तू॰ 2016

👍1

@littlee, संक्षेप में आप के बजाय मतलब checked={this.state.isMustFill} करते checked={!!this.state.isMustFill}

kopahead 23 जून 2017

👍18 🎉3 🚀1 😄1

@kopahead

जाँच के बजाय = {this.state.isMustFill} चेक करें = {!! this.state.isMustFill}

मुझे नहीं लगता कि इससे पहले मैंने जो कहा था उससे संबंधित है

littlee 23 जून 2017

मेरे पास एक ही चेतावनी थी। null से false कास्टिंग मूल्य समस्या हल करती है:
<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

इसलिए अब मुझे चेकबॉक्स में हर जगह !! लगाना चाहिए

sharpensteel 31 अग॰ 2017

👍24 ❤6

कोशिश करें: checked={(this.state.someValue)} इसके बजाय जो बूलियन को डाले। फालसी अशक्त / अपरिभाषित / 0 / '' = असत्य बाकी सब सत्य। यह एक टर्नरी ऑपरेटर की तरह काम करता है:

checked={(this.state.item5) ? true : false}

jeremybradbury 30 मई 2018

👍5

फिर भी एक और तरीका है:

checked={this.state.someValue === true}

ryanneary 9 जन॰ 2020

मेरे मामले में, घटक के लोड होने पर checked मूल्य undefined रूप में पारित किया गया था। मैंने false तब पास किया है जब यह undefined ।

मैंने निम्नलिखित कोड का उपयोग किया, चेतावनी गायब हो गई।

function CheckboxButton({checked, onChange, textComponent} = {}) {
    return (
        <label className='checkbox-button'>
            <input
                type='checkbox'
                checked={checked || false}
                onChange={onChange}/>
            {textComponent}
        </label>
    );
}

imtmh 10 जन॰ 2020

👍3 🎉2

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React: चेतावनी को नियंत्रित करने के लिए टाइप रेडियो के अनियंत्रित इनपुट को बदल रहा है ...

सबसे उपयोगी टिप्पणी

सभी 30 टिप्पणियाँ

संबंधित मुद्दों