अपने आप साफ होने वाले प्रपत्र एक बेहतर उपयोगकर्ता अनुभव प्रदान करते हैं। पता लगाएँ कि कैसे useRef आपके ऐप के इस भाग में एक प्रमुख खिलाड़ी हो सकता है।
रिएक्ट का उपयोग करते हुए, आपको कुछ इनपुट फ़ील्ड को दूसरों की तुलना में रीसेट करना अधिक अजीब लग सकता है। विशेष रूप से, फ़ाइल इनपुट समस्याग्रस्त हो सकते हैं, फिर भी ये सटीक फ़ील्ड हैं जिन्हें आप सफल फ़ाइल अपलोड के बाद रीसेट करना चाहते हैं।
शुक्र है, useRef हुक एक सरल समाधान प्रदान करता है। जानें कि सफल अपलोड के बाद आप useRef हुक के साथ फ़ाइल इनपुट फ़ील्ड को कैसे साफ़ कर सकते हैं।
एक साधारण अपलोड फॉर्म बनाना
यह प्रदर्शित करने के लिए कि useRef के साथ फ़ाइल इनपुट फ़ील्ड को कैसे रीसेट करना है, आप करेंगे एक साधारण रिएक्ट फॉर्म बनाएं एक इनपुट फ़ील्ड के साथ जो एक छवि स्वीकार करता है।
सबसे पहले, चयनित फ़ाइल को ट्रैक करने के लिए useState हुक का उपयोग करके चयनित फ़ाइल नाम का एक राज्य मान सेट करें। चूंकि उपयोगकर्ता ने अभी तक फ़ाइल का चयन नहीं किया है, इसलिए चयनित फ़ाइल के लिए प्रारंभिक स्थिति शून्य होगी।
साथ ही, हैंडलफाइल चेंज नामक एक हैंडलर फ़ंक्शन बनाएं जो उपयोगकर्ता द्वारा फ़ाइल का चयन करते समय चयनित फ़ाइल स्थिति को अपडेट करता है। हैंडलसबमिट नामक एक दूसरा फ़ंक्शन जोड़ें, जिसे उपयोगकर्ता द्वारा फ़ाइल अपलोड करने पर राज्य को अपलोड करना चाहिए।
आयात {यूज़स्टेट} से"प्रतिक्रिया";समारोहFileUploadForm() {
कॉन्स्ट [चयनित फ़ाइल, सेट चयनित फ़ाइल] = उपयोगस्टेट (व्यर्थ);कॉन्स्ट हैंडलफाइल चेंज = (आयोजन) => {
सेट चयनित फ़ाइल (event.target.files [0]);
};कॉन्स्ट हैंडल सबमिट करें = (आयोजन) => {
घटना.रोकथाम ();
};
वापस करना (
<>
जब फ़ाइल अपलोड पूर्ण हो जाए, तो एप्लिकेशन को इनपुट फ़ील्ड साफ़ कर देनी चाहिए, जिसके बारे में आप नीचे जानेंगे कि कैसे करना है।
फ़ाइल अपलोड करने के बाद इनपुट फ़ील्ड साफ़ करें
यदि यह एक पाठ क्षेत्र था, तो आप राज्य को खाली स्ट्रिंग पर सेट करके इनपुट साफ़ कर सकते हैं:
सेट चयनित फ़ाइल ("")
लेकिन यह प्रकार के इनपुट फ़ील्ड के साथ काम नहीं करेगा फ़ाइल. चयनित फ़ील्ड स्थिति चर को एक खाली स्ट्रिंग पर सेट करना केवल फ़ाइल डेटा को राज्य से हटाता है और DOM से नहीं। ऐसा इसलिए है क्योंकि यह स्थिति इनपुट मान को संदर्भित नहीं करती है।
इनपुट मान को साफ़ करने के लिए, आपको फ़ाइल इनपुट के लिए useRef हुक का उपयोग करके एक संदर्भ बनाना होगा। इस उदाहरण में, प्रतिक्रिया से useRef आयात करें और fileRef नामक एक रेफ ऑब्जेक्ट बनाएं:
आयात {यूज़स्टेट, यूज़रेफ़} से"प्रतिक्रिया";समारोहFileUploadForm() {
// ...
कॉन्स्ट fileRef = useRef ()
वापस करना (
// ...
);
}
फिर नीचे दिखाए गए अनुसार इनपुट फ़ील्ड में रेफरी का संदर्भ लें।
रिएक्ट सेट करता है मौजूदा DOM तत्व के लिए ref चर की संपत्ति जिसका अर्थ है कि आप इस तरह फ़ाइल मान प्राप्त कर सकते हैं:
fileRef.current.value
इसके बाद आप इसे शून्य निर्दिष्ट करके इस मान को रीसेट कर सकते हैं।
fileRef.current.value = व्यर्थ
इसे इस तरह से हैंडल रीसेट नामक फ़ंक्शन में एनकैप्सुलेट करें:
कॉन्स्ट हैंडलरीसेट = () => {
fileRef.current.value = व्यर्थ;
};
जब आप इनपुट फ़ील्ड को साफ़ करने के लिए फ़ाइल को सफलतापूर्वक अपलोड करते हैं तो इस फ़ंक्शन को कॉल करें।
फ़ाइल अपलोड के बाद आपको इनपुट फ़ील्ड को रीसेट क्यों करना चाहिए I
सफल फ़ाइल अपलोड के बाद इनपुट फ़ील्ड को रीसेट करना आम तौर पर एक अच्छा अभ्यास है। ऐसा इसलिए है क्योंकि यह उपयोगकर्ता को एक स्पष्ट संकेत देता है कि उनका अपलोड सफल रहा और साथ ही उन्हें इनपुट को मैन्युअल रूप से साफ़ किए बिना दूसरी फ़ाइल अपलोड करने का अवसर प्रदान करता है मैदान।
