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

1. नियंत्रित घटकों का उपयोग करें

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

import React, { useState } from 'react';

const MyForm = () => {


  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  

2. त्रुटि प्रबंधन

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

• शून्य/अपरिभाषित हो रहा है
• खाली मान प्राप्त हो रहा है
• अमान्य डेटा प्रकार आदि

उपयोगकर्ता अनुभव को बढ़ाने और सर्वर लोड को कम करने के लिए क्लाइंट-साइड सत्यापन लागू करना चाहिए जो अंततः प्रदर्शन में सुधार करता है। डेटा अखंडता सुनिश्चित करने के लिए यूप या कस्टम सत्यापन तर्क जैसी लाइब्रेरी का उपयोग करें।

आइए देखें, कस्टम सत्यापन तर्क कैसे लागू करें

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  

काम में आसानी के लिए, आपको फॉर्म डेटा को आसानी से मान्य करने के लिए यूप पैकेज का उपयोग करना चाहिए। यह एक बहुत लोकप्रिय पैकेज है जिसका उपयोग रिएक्ट-हुक-फॉर्म या फॉर्मिक जैसी फॉर्म लाइब्रेरी के साथ किया जाता है।
हाँ डॉक्स: https://www.npmjs.com/package/yup
 

3. तृतीय-पक्ष पुस्तकालयों का लाभ उठाएं

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

फ़ॉर्मिक का उपयोग करना:

दस्तावेज़:- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   
 
    
Sign Up
     {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  

    First Name
    Last Name
    Email
    Submit
  
 
);


ReactDOM.render(, document.getElementById('root'));

लाइव फॉर्मिक डेमो देखने के लिए क्लिक करें

निष्कर्ष

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