बुनियादी उपकरणों का उपयोग करके React.js में रूपों के साथ काम करना

परिचय

React.js पर काम करते समय, मुझे अक्सर फॉर्म प्रोसेसिंग से निपटना पड़ता था। Redux-Form , React-Redux-Form मेरे हाथों से होकर गुजरा, लेकिन पुस्तकालयों में से एक ने भी मुझे पूरी तरह से संतुष्ट नहीं किया। मुझे यह पसंद नहीं था कि फॉर्म की स्थिति को reducer में संग्रहीत किया जाता है, और प्रत्येक घटना एक्शन क्रिएटर के माध्यम से गुजरती है। इसके अलावा, दान अब्रामोव के अनुसार, "फ़ॉर्म की स्थिति स्वाभाविक रूप से अल्पकालिक और स्थानीय है, इसलिए आपको इसे Redux (या किसी भी फ़्लक्स लाइब्रेरी) में ट्रैक करने की आवश्यकता नहीं है।"

मैं ध्यान देता हूं कि रिएक्ट- रिड्यूक्स -फॉर्म में एक लोकलफॉर्म घटक है जो आपको बिना रिडक्स के काम करने की अनुमति देता है, लेकिन मेरी राय में, यह 21.9kB लाइब्रेरी स्थापित करने और इसे आधे से कम उपयोग करने का कोई मतलब नहीं है।

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

मैंने घटक की स्थानीय स्थिति का उपयोग करना शुरू कर दिया, और नई कठिनाइयां उत्पन्न हुईं: कोड की मात्रा में वृद्धि हुई, घटकों ने पठनीयता खो दी, बहुत अधिक दोहराव दिखाई दिया।

समाधान उच्च आदेश घटक की अवधारणा थी। संक्षेप में, HOC एक फ़ंक्शन है जो एक घटक इनपुट प्राप्त करता है और इसे अतिरिक्त या संशोधित प्रॉप्स के एकीकरण के साथ अद्यतन करता है। आधिकारिक React.js वेबसाइट पर HOC के बारे में और पढ़ें। HOC अवधारणा का उपयोग करने का उद्देश्य घटक को दो भागों में विभाजित करना था, जिनमें से एक तर्क के लिए जिम्मेदार होगा, और दूसरा - प्रदर्शन के लिए।

रूप रचना

एक उदाहरण के रूप में, हम एक सरल फीडबैक फॉर्म बनाएंगे जिसमें 3 फ़ील्ड होंगे: नाम, ईमेल, फोन।

सरलता के लिए हम Create-React-App का उपयोग करते हैं। इसे विश्व स्तर पर स्थापित करें:

npm i -g create-react-app 

फिर शुद्ध-फ़ॉर्म फ़ोल्डर में अपना एप्लिकेशन बनाएं

 create-react-app pure-form 

इसके अतिरिक्त, प्रोप-प्रकार और वर्गनाम स्थापित करें, वे भविष्य में हमारे लिए उपयोगी होंगे:

 npm i prop-types classnames -S 

दो फ़ोल्डर / घटक और / कंटेनर बनाएँ। / घटक फ़ोल्डर में प्रदर्शन के लिए जिम्मेदार सभी घटक होंगे। / कंटेनर फ़ोल्डर में, तर्क के लिए जिम्मेदार घटक।

/ घटक फ़ोल्डर में, एक Input.jsx फ़ाइल बनाएँ जिसमें हम सभी इनपुट के लिए एक सामान्य घटक घोषित करते हैं। इस स्तर पर महत्वपूर्ण है कि प्रॉपटीपाइप्स और डिफॉल्टप्रॉप्स को क्वॉलिटी तरीके से प्रिस्क्राइब करना न भूलें, कस्टम क्लासेस को जोड़ने की संभावना प्रदान करें, और ऑप्टिमाइजेशन के लिए इसे PureComponent से इनहेरिट भी करें।
परिणाम है:

 import React, { PureComponent } from 'react'; import cx from 'classnames'; import PropTypes from 'prop-types'; class Input extends PureComponent { render() { const { name, error, labelClass, inputClass, placeholder, ...props } = this.props; return ( <label className={cx('label', !!labelClass && labelClass)} htmlFor={`id-${name}`} > <span className="span">{placeholder}</span> <input className={cx( 'input', !!inputClass && inputClass, !!error && 'error' )} name={name} id={`id-${name}`} onFocus={this.handleFocus} onBlur={this.handleBlur} {...props} /> {!!error && <span className="errorText">{error}</span>} </label> ); } } Input.defaultProps = { type: 'text', error: '', required: false, autoComplete: 'off', labelClass: '', inputClass: '', }; Input.propTypes = { value: PropTypes.string.isRequired, name: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, placeholder: PropTypes.string.isRequired, error: PropTypes.string, type: PropTypes.string, required: PropTypes.bool, autoComplete: PropTypes.string, labelClass: PropTypes.string, inputClass: PropTypes.string, }; export default Input; 

इसके बाद, / घटकों के फ़ोल्डर में, फ़ाइल बनाएं। Form.jsx , जिसमें फार्म वाला घटक घोषित किया जाएगा। हम प्रॉपर के माध्यम से इसके साथ काम करने के लिए सभी तरीकों को प्राप्त करेंगे, साथ ही इनपुट के लिए मूल्य , इसलिए यहां राज्य की आवश्यकता नहीं है। हमें मिलता है:

 import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Input from './Input'; import FormWrapper from '../containers/FormWrapper'; class Form extends Component { render() { const { data: { username, email, phone }, errors, handleInput, handleSubmit, } = this.props; return ( <div className="openBill"> <form className="openBillForm" onSubmit={handleSubmit}> <Input key="username" value={username} name="username" onChange={handleInput} placeholder="" error={errors.username} required /> <Input key="phone" value={phone} name="phone" onChange={handleInput} placeholder="" error={errors.phone} required /> <Input key="email" value={email} type="email" name="email" onChange={handleInput} placeholder=" " error={errors.email} required /> <button type="submit" className="submitBtn">   </button> </form> </div> ); } } Form.propTypes = { data: PropTypes.shape({ username: PropTypes.string.isRequired, phone: PropTypes.string.isRequired, email: PropTypes.string.isRequired, }).isRequired, errors: PropTypes.shape({ username: PropTypes.string.isRequired, phone: PropTypes.string.isRequired, email: PropTypes.string.isRequired, }).isRequired, handleInput: PropTypes.func.isRequired, handleSubmit: PropTypes.func.isRequired, }; export default FormWrapper(Form); 

HOC निर्माण

/ कंटेनर फ़ोल्डर में, FormWrapper.jsx फ़ाइल बनाएँ। हम फ़ंक्शन को अंदर घोषित करते हैं, जो रैप्डकंपोनेंट घटक को एक तर्क के रूप में लेता है और रैप्डफ़ॉर्म क्लास को वापस करता है। इस वर्ग का रेंडर मेथड WrappedComponent को प्रॉप्स के साथ एकीकृत करता है। क्लासिक फ़ंक्शन घोषणा का उपयोग करने का प्रयास करें, यह डिबगिंग प्रक्रिया को सरल करेगा।

रैप्डफ़ॉर्म क्लास में , स्थिति बनाएँ: isFetching - अतुल्यकालिक अनुरोधों को नियंत्रित करने के लिए एक ध्वज, डेटा - इनपुट मानों, त्रुटियों वाली एक वस्तु - त्रुटियों को संग्रहीत करने के लिए एक वस्तु। घोषित राज्य को रैप्डकम्पोनेंट में भेज दिया जाता है। इस प्रकार, ऊपरी राज्यों में प्रपत्र राज्यों के भंडारण को लागू किया जाता है, जो कोड को अधिक पठनीय और पारदर्शी बनाता है।

 export default function Wrapper(WrappedComponent) { return class FormWrapper extends Component { state = { isFetching: false, data: { username: '', phone: '', email: '', }, errors: { username: '', phone: '', email: '', }, }; render() { return <WrappedComponent {...this.state} />; } }; } 

लेकिन ऐसा कार्यान्वयन सार्वभौमिक नहीं है, क्योंकि प्रत्येक फॉर्म के लिए आपको अपना स्वयं का आवरण बनाना होगा। आप इस प्रणाली को सुधार सकते हैं और HOC को एक अन्य फ़ंक्शन के अंदर एम्बेड कर सकते हैं जो प्रारंभिक स्थिति मानों को बनाएगा।

 import React, { Component } from 'react'; export default function getDefaultValues(initialState, requiredFields) { return function Wrapper(WrappedComponent) { return class WrappedForm extends Component { state = { isFetching: false, data: initialState, errors: requiredFields, }; render() { return <WrappedComponent {...this.state} {...this.props} />; } }; }; } 

इस फ़ंक्शन में, आप न केवल राज्य के प्रारंभिक मूल्यों को पारित कर सकते हैं, बल्कि आम तौर पर किसी भी पैरामीटर। उदाहरण के लिए, विशेषताएँ और विधियाँ, जिनके आधार पर Form.jsx में एक फॉर्म बनाना संभव होगा। इस तरह के कार्यान्वयन का एक उदाहरण अगले लेख के लिए विषय होगा।

Form.jsx फ़ाइल में , हम प्रारंभिक राज्य मानों की घोषणा करते हैं और उन्हें HOC में पास करते हैं:

 const initialState = {    username: '',    phone: '',    email: '', }; export default FormWrapper(initialState, initialState)(Form); 

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

 handleInput = event => { const { value, name } = event.currentTarget; this.setState(({ data, errors }) => ({ data: { ...data, [name]: value, }, errors: { ...errors, [name]: '', }, })); }; 

अब हम फॉर्म को संसाधित करने और कंसोल में डेटा प्रदर्शित करने के लिए हैंडसबमिट विधि बनाएंगे , लेकिन इससे पहले हमें सत्यापन पास करना होगा। हम केवल आवश्यक फ़ील्ड को मान्य करेंगे, अर्थात, इस .state.errors ऑब्जेक्ट की सभी कुंजियाँ। हमें मिलता है:

 handleSubmit = e => {    e.preventDefault();    const { data } = this.state;    const isValid = Object.keys(data).reduce( (sum, item) => sum && this.validate(item, data[item]),    true    ); if (isValid) { console.log(data); } }; 

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

 validate = (name, value) => { if (!value.trim()) { this.setState( ({ errors }) => ({ errors: { ...errors, [name]: '    ', }, }), () => false ); } else { return true; } }; 

दोनों हैंडल और हैंडलइन्पुट पद्धतियों को लिपटा के पास भेजा जाना चाहिए:

 render() {    return (    <WrappedComponent    {...this.state}       {...this.props}     handleInput={this.handleInput} handleSubmit={this.handleSubmit}    /> ); } 

नतीजतन, हमें सरल सत्यापन और त्रुटि आउटपुट के साथ एक तैयार फीडबैक फॉर्म मिलता है। उसी समय, हमने प्रदर्शन के लिए जिम्मेदार घटक से तार्किक भाग को हटा दिया।

निष्कर्ष

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

लेख में या मेरे मेल पर प्रश्नों और टिप्पणियों को लिखें।

एक पूर्ण उदाहरण यहां पाया जा सकता है: शुद्ध प्रतिक्रिया रूप ।

आपका ध्यान के लिए धन्यवाद!