रिएक्ट में, फॉर्म इनपुट को संभालने के दो मुख्य दृष्टिकोण हैं:

• नियंत्रित घटक
• अनियंत्रित घटक

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

नियंत्रित घटक

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

ऑनचेंज इवेंट हैंडलर का उपयोग राज्य को अपडेट करने के लिए किया जाता है।

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

     const handleChange = (e) => {
          setName(e.target.value);
     }

     return(
          
     );
}

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

अनियंत्रित घटक

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

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

     return(
          

इस उपरोक्त उदाहरण में, inputRef का उपयोग input फ़ील्ड के लिए ref बनाने के लिए किया जाता है। handleSubmit फ़ंक्शन inputRef.current.value का उपयोग करके इनपुट के वर्तमान मूल्य तक पहुंचता है। आवश्यकतानुसार इनपुट मान का उपयोग करने के लिए फॉर्म सबमिशन तर्क लागू किया जा सकता है।