सिंपल HTML फॉर्म में, फॉर्म एलिमेंट्स मान को आंतरिक रूप से अपने पास रखते हैं और फॉर्म सबमिशन बटन पर सबमिट करते हैं।
उदाहरण
<!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <form> <label> User Name: <input type="text" name="username" /> </label> <input type="submit" value="Submit Form" /> </form> </body> </html>
उपरोक्त उदाहरण में, हमारे पास username नामक एक सिंपल इनपुट है और हम फॉर्म सबमिशन पर इसका मान प्राप्त कर सकते हैं। HTML फॉर्म का डिफ़ॉल्ट व्यवहार नए पेज पर नेविगेट करना है यानी पोस्ट फॉर्म सबमिशन पेज।
लेकिन यह अधिक लाभ दे सकता है यदि हमारे पास फॉर्म सबमिशन हैंडलर जावास्क्रिप्ट फंक्शन है जो फॉर्म डेटा को भी वैलिडेट कर सकता है। वैलिडेशन उपयोगकर्ता को प्रासंगिक फीडबैक देगा।
React में फॉर्म सबमिशन को संभालने की एक तकनीक है जिसे कंट्रोल्ड कंपोनेंट्स कहा जाता है।
HTML की तरह, इनपुट, टेक्स्टएरिया जैसे एलिमेंट्स अपनी स्थिति रखते हैं और उपयोगकर्ता क्रियाओं के आधार पर अपडेट होते हैं। React में म्यूटेबल फील्ड्स स्टेट ऑब्जेक्ट के साथ रखे जाते हैं।
React के कंट्रोल्ड कंपोनेंट दृष्टिकोण में username फील्ड को संभालना -
class UserForm extends React.Component { constructor(props) { super(props); this.state = {username: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({username: event.target.value}); } handleFormSubmit(event) { console.log('username: ' + this.state.username); event.preventDefault(); } render() { return ( <form onSubmit={this.handleFormSubmit}> <label> Name: <input type="text" value={this.state.username} onChange={this.handleUsernameChange} /> </label> <input type="submit" value="Submit" /> </form> ); } }
यहां हमारे पास स्टेट फील्ड username को अपडेट करने के लिए onChange हैंडलर फंक्शन है।
फॉर्मसबमिट पर हम ब्राउज़र में कंसोल लॉग दिखा रहे हैं ताकि सबमिट किए गए यूजरनेम को प्रदर्शित किया जा सके।
अन्य कंट्रोल्ड प्रकार के कंपोनेंट्स टेक्स्टएरिया, सेलेक्ट टैग, रेडियो बटन आदि हैं।
कुछ अनकंट्रोल्ड कंपोनेंट्स भी हैं जैसे फाइल टाइप जो रीड-ओनली प्रकृति के हैं और केवल फॉर्म सबमिशन पर अपना मान प्राप्त करते हैं।
सिंगल JS फंक्शन के साथ मल्टीपल फॉर्म इनपुट्स को संभालना -
handleInputChange(event) { const value = event.target.value; const name = event.target.name; this.setState({ [name]: value }); }
नल मान वाले कंट्रोल्ड इनपुट को स्टेट इनिशियलाइज़ेशन का उपयोग करके फील्ड्स के लिए डिफ़ॉल्ट मान प्रदान करके टाला जाना चाहिए।
React में फॉर्म हैंडलिंग के लिए पूर्ण पैमाने के समाधान के लिए थर्ड-पार्टी लाइब्रेरी जैसे फॉर्मिक का उपयोग किया जा सकता है। यह वैलिडेशन, उपयोगकर्ता को फीडबैक और बहुत कुछ के लिए सरल है।
