रिएक्ट पोस्ट-रेंडरिंग में एक इनपुट फील्ड पर फोकस करना

रिएक्ट में, रेंडरिंग के बाद एक इनपुट फील्ड पर फोकस सेट करना विभिन्न तरीकों से हासिल किया जा सकता है .

एक दृष्टिकोण दस्तावेज़ में सुझाए गए रेफरी का उपयोग करना है। रेंडर फ़ंक्शन (उदाहरण के लिए, "nameInput") के भीतर इनपुट फ़ील्ड को रेफरी निर्दिष्ट करके, आप इसके DOM नोड तक पहुंच सकते हैं और मैन्युअल रूप से फोकस विधि को लागू कर सकते हैं। हालाँकि, यह समझना महत्वपूर्ण है कि इस फ़ंक्शन को कहाँ और कब कॉल करना है। . यह सुनिश्चित करता है कि घटक को DOM में माउंट करने के बाद फोकस सेट किया गया है। कोड इस तरह दिखेगा:

"प्रतिक्रिया" से रिएक्ट, { यूज़रेफ, यूज़इफ़ेक्ट } आयात करें; स्थिरांक MyComponent = () => { स्थिरांक nameInputRef = useRef(); उपयोगप्रभाव(() => { यदि (nameInputRef.current) { nameInputRef.current.focus(); } }, []); वापस करना ( ); }; निर्यात डिफ़ॉल्ट MyComponent;

import React, { useRef, useEffect } from "react";

const MyComponent = () => {
  const nameInputRef = useRef();

  useEffect(() => {
    if (nameInputRef.current) {
      nameInputRef.current.focus();
    }
  }, []);

  return (
    
  );
};

export default MyComponent;

रिटर्न ( );ध्यान दें कि, JSX में, केस-असंवेदनशील HTML विशेषता के विपरीत, संपत्ति ऑटोफोकस (बड़े F के साथ) है।