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

मेरे submitNewName() फ़ंक्शन के भीतर, मेरे पास कोड की निम्न पंक्ति है: var newName = document.getElementById("newNameForm").submit()। मैंने इसी तरह का एक और प्रश्न पढ़ा जहां किसी ने function(e) {e.preventDefault();} को .submit के तर्क के रूप में जोड़ने का सुझाव दिया, लेकिन जब मैंने कोशिश की कि यह कुछ भी नहीं बदला।

यहाँ मेरा रूप है:

<form id="addNameForm" className="RNGpopupTXT">
                                Name: <input type="text" name="name"/>
                                <br/><br/>
                                Type:  <select>
                                    <option value="fname">First Name</option>
                                    <option value="lname">Last Name</option>
                                    <option value="sname">Single Name (e.g. Madonna)</option>
                                    <option value="title">Title</option>
                                </select> 
                                <br/><br/>
                                Gender: <select>
                                    <option value="mg">Male</option>
                                    <option value="fg">Female</option>
                                    <option value="ng">Non-specific</option>
                                </select> 
                                <br/><br/>
                                Tags: <input type="text" size="40" name="tags" placeholder=" eg. 'Star Wars,Scifi,Space'"/>
                                <br/><br/><br/><br/>
                                <div align="center">
                                    <input type="submit" value="Submit" className="mdc-button" style={{ textDecoration: 'none' }} onClick={() => this.submitNewName()}/>
                                </div>
                            </form>

और यहाँ मेरा कार्य है:

submitNewName() {
        var newName = document.getElementById("newNameForm").submit(function(e) {
            e.preventDefault();
        });
}

मैं चाहता हूं कि फॉर्म से डेटा फ़ंक्शन को इस तरह से दिया जाए जिससे इसे JSON फ़ाइल डेटा से तुलना करने की अनुमति मिल सके। मैं यह भी नहीं चाहता कि पृष्ठ रीफ्रेश हो, क्योंकि यह पृष्ठ की स्थिति को रीफ्रेश करता है, समय से पहले मोडल को बंद कर देता है। जब मैं अभी प्रोग्राम चलाता हूं, तो यह कंसोल को एक त्रुटि संदेश भेजता है, लेकिन मैं इसे पढ़ नहीं सकता क्योंकि कंसोल वेब पेज के साथ रीफ्रेश किया गया है।

0
Triad 26 जुलाई 2019, 00:17

1 उत्तर

सबसे बढ़िया उत्तर

ऐसा लगता है कि आप यहां अपने जीवन को आसान बनाने के लिए अधिक प्रतिक्रिया का उपयोग कर सकते हैं।

आपको फ़ॉर्म के onSubmit ईवेंट का उपयोग करने की आवश्यकता नहीं है। आप बटन में बस एक onClick हैंडलर जोड़ सकते हैं। उस फ़ंक्शन में, आप अपनी इच्छित सभी तुलना कर सकते हैं और जब आप तैयार हों, तो यह सबमिटिंग लॉजिक भी कर सकता है।

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

जैसा कि मैंने आपके उदाहरण में ज्यादा रिएक्ट कोड नहीं देखा, मैंने कुछ लिखने की स्वतंत्रता ली। उम्मीद है कि यह आपकी मदद करेगा:

https://codesandbox.io/s/elastic-shape-yrv0b

0
go_diego 26 जुलाई 2019, 01:01