मैं Svelte के लिए ट्यूटोरियल के माध्यम से जा रहा हूं और इस उदाहरण पर आया हूं, और मैं उलझन में हूं कि यह कैसे काम कर रहा है। (मैंने कुछ अन्य कोड काट दिए हैं जो प्रश्न के लिए प्रासंगिक नहीं हैं, पूरा उदाहरण यहां दिया गया है: https://svelte.dev/tutorial/ टिक करें)

<script>
   async function handleKeydown(event) {
     const { selectionStart, selectionEnd, value } = this;

     await tick();
     this.selectionStart = selectionStart;
     this.selectionEnd = selectionEnd;
   }
</script>

<textarea value={text} on:keydown={handleKeydown}></textarea>

क्या कोई कृपया इस तर्क की व्याख्या कर सकता है कि यहाँ 'इस' का उपयोग कैसे किया जा रहा है? मुझे समझ में नहीं आता कि यह टेक्स्टरेरा के भीतर मूल्य को संदर्भित करना कैसे जानता है। क्या टेक्स्टरेरा द्वारा बुलाए जा रहे फ़ंक्शन के साथ इसका कुछ संबंध है और टेक्स्टरेरा तत्व को संदर्भित करने वाले फ़ंक्शन के भीतर एक संदर्भ बनाना है?

और यह भी कि नीचे दिए गए कोड जैसा कुछ काम क्यों नहीं करता है? (कंसोल लॉग अपरिभाषित)

function logger(event) {
 console.log(event.value)
}
0
serp002 28 सितंबर 2020, 15:25

1 उत्तर

सबसे बढ़िया उत्तर

this DOM द्वारा प्रदान किया जाता है।

DOM onevent हैंडलर पर MDN का लेख फ़ॉर्म करें:

जब ईवेंट हैंडलर का आह्वान किया जाता है, तो हैंडलर के अंदर this कीवर्ड DOM तत्व पर सेट हो जाता है, जिस पर हैंडलर पंजीकृत होता है।

Svelte एक ढांचा है जो DOM के शीर्ष पर बनता है, लेकिन अनिवार्य रूप से on:keydown={handleKeydown} एक DOM ईवेंट हैंडलर बाइंडिंग में अनुवाद करता है जिसमें उपरोक्त उद्धृत संपत्ति है।

3
trincot 28 सितंबर 2020, 12:31