कैसे पर मापदंडों को पारित करने के लिए: Svelte में क्लिक करें?

Question

एक बटन को एक समारोह में बांधना आसान और सरल है:

<button on:click={handleClick}>
    Clicks are handled by the handleClick function!
</button>

जब मैं ऐसा करता हूं तो मुझे पैरामीटर (तर्कों) को पारित करने का कोई तरीका नहीं दिखता है:

<button on:click={handleClick("parameter1")}>
    Oh no!
</button>

फ़ंक्शन को पेज लोड पर कहा जाता है, और फिर कभी नहीं।

क्या यह संभव है कि मापदंडों को कार्य करने के लिए कहा जाए on:click{}?

---

संपादित करें:

मुझे इसे करने के लिए सिर्फ एक हैक करने का तरीका मिला। एक इनलाइन हैंडलर से फ़ंक्शन को कॉल करना काम करता है।

<button on:click={() => handleClick("parameter1")}>
    It works...
</button>

Comments

डॉक्स ने भी स्पष्ट रूप से उल्लेख नहीं किया है। लेकिन हाँ अब तक मुझे लगता है कि .. जब तक वे एक अलग समाधान के साथ आते हैं ..

— मनीष

यह एक हैक नहीं है, यह कैसे काम करता है । यह स्पष्ट रूप से ट्यूटोरियल svelte.dev/tutorial/inline-handlers

— रिच हैरिस

आपकी टिप्पणियों के लिए आभार! ऐसा करने का यह "हैकरी तरीका" इतना बुरा नहीं है, लेकिन मैं यह कहने की हिम्मत करूंगा कि डॉक्स और ट्यूटोरियल इस बारे में बहुत स्पष्ट नहीं हैं । शायद यह सिर्फ मुझे है, यद्यपि।

— फेलदेव डे

Answer 1

टी एल; डॉ

सिर्फ एक अन्य फ़ंक्शन में हैंडलर फ़ंक्शन को लपेटें, एलिगेंसी के लिए एरो फ़ंक्शन का उपयोग करें

---

आपको एक फ़ंक्शन घोषणा का उपयोग करना होगा और फिर हैंडलर को तर्कों के साथ कॉल करना होगा। एरो फंक्शन इस परिदृश्य के लिए सुरुचिपूर्ण और अच्छा है।

मुझे दूसरे फ़ंक्शन रैपर की आवश्यकता क्यों है?

यदि आप सिर्फ हैंडलर का उपयोग करते हैं और मापदंडों को पारित करते हैं, तो यह कैसा दिखेगा?

शायद कुछ इस तरह:

<button on:click={handleClick("arg1")}>My awesome button</button>

लेकिन याद रखें, handleClick("arg1")यह है कि आप फ़ंक्शन को तुरंत कैसे लागू करते हैं, और ठीक ऐसा ही हो रहा है जब आप इसे इस तरह से डालते हैं, तो इसे बुलाया जाएगा जब निष्पादन इस रेखा तक पहुंचता है, और जैसा कि अपेक्षित नहीं है, ऑन बटन क्लीक ...

इसलिए, आपको एक फ़ंक्शन डिक्लेरेशन की आवश्यकता होती है, जिसे केवल क्लिक इवेंट द्वारा लागू किया जाएगा और इसके अंदर आप अपने हैंडलर को जितने चाहें उतने तर्क के साथ कॉल कर सकते हैं।

<button on:click={() => handleClick("arg1", "arg2")}>
    My awesome button
</button>

जैसा कि @ रीच हैरिस (स्वेल्टे के लेखक) ने उपरोक्त टिप्पणियों में बताया है: यह हैक नहीं है, लेकिन दस्तावेज़ीकरण उनके ट्यूटोरियल में भी दिखाता है: https://svelte.dev/tutorial/inline-handlers

Answer 2

रिच ने इसका जवाब एक टिप्पणी में दिया है, इसलिए उसे श्रेय जाता है, लेकिन एक क्लिक हैंडलर में मापदंडों को बांधने का तरीका इस प्रकार है:

<a href="#" on:click|preventDefault={() => onDelete(projectId)}>delete</a>

function onDelete (id) {
  ...
}

उन लोगों के लिए कुछ अतिरिक्त विवरण प्रदान करने के लिए जो इसके साथ संघर्ष करते हैं, और यह डॉक्स में होना चाहिए यदि ऐसा नहीं है, तो आप ऐसे हैंडलर में क्लिक ईवेंट भी प्राप्त कर सकते हैं:

<a href="#" on:click={event => onDelete(event)}>delete</a>

function onDelete (event) {
  // if it's a custom event you can get the properties passed to it:
  const customEventData = event.detail

  // if you want the element, you guessed it:
  const targetElement = event.target
  ...
}

Comments

जब आप कोई URL नहीं रखते हैं तो आप बटनों के लिए लिंक का उपयोग क्यों कर रहे हैं?

— मिकमेकाना

क्योंकि मैं PWA का निर्माण करता हूं जिसमें लिंक कमियां हैं, इसलिए यह आदत का एक कारण है। यह आसानी से एक बटन हो सकता है।

— एंटनी जोन्स

Answer 3

मुझे इसके साथ काम करना पड़ा:

<a href="#" on:click|preventDefault={onDelete.bind(this, project_id)}>delete</a>

function onDelete(id) {
}

Answer 4

यहाँ यह एक बहस विधि और घटना तर्क के साथ है:

<input type="text" on:keydown={event => onKeyDown(event)} />


const onKeyDown = debounce(handleInput, 250);

async function handleInput(event){
    console.log(event);
}

Answer 5

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

const handleClick = (parameter) => () => {
   // actual function
} 

और HTML में

<button on:click={handleClick('parameter1')>
   It works...
</button>

करीने से सावधान रहें

जैसा कि टिप्पणियों में उल्लेख किया गया है, करी के पास इसके नुकसान हैं। सबसे आम एक है कि उपरोक्त उदाहरण में handleClick('parameter1')क्लिक करने पर फायर नहीं किया जाएगा, बल्कि रेंडर करने पर, एक फ़ंक्शन लौटाएगा जो बदले में ऑनक्लिक फायर किया जाएगा। इसका मतलब है कि यह फ़ंक्शन हमेशा 'पैरामीटर 1' का उपयोग करेगा क्योंकि यह तर्क है।

इसलिए इस पद्धति का उपयोग करना केवल तभी सुरक्षित होगा जब उपयोग किया गया पैरामीटर किसी प्रकार का एक स्थिर है और एक बार इसे प्रस्तुत करने के बाद बदल नहीं जाएगा।

यह मुझे एक और बिंदु पर लाएगा:

1) यदि यह एक निरंतर उपयोग किया जाने वाला पैरामीटर है, तो आप एक अलग फ़ंक्शन का उपयोग कर सकते हैं

const handleParameter1Click = () => handleClick('parameter1');

2) यदि मान गतिशील है, लेकिन घटक के भीतर उपलब्ध है, तो यह अभी भी एक स्टैंडअलोन फ़ंक्शन के साथ संभाला जा सकता है:

let parameter1;
const handleParameter1Click = () => handleClick(parameter1);

3) यदि मान गतिशील है, लेकिन घटक से उपलब्ध नहीं है, क्योंकि यह कुछ प्रकार के दायरे पर निर्भर है (उदाहरण: #each ब्लॉक में प्रदान की गई वस्तुओं की सूची) ' हैकी ' दृष्टिकोण बेहतर काम करेगा। हालाँकि मुझे लगता है कि यह उस मामले में बेहतर होगा कि लिस्ट-एलिमेंट्स एक कंपोनेंट के रूप में हों और केस टू # 2 में वापस आएं

निष्कर्ष निकालने के लिए: करीकरण कुछ परिस्थितियों में काम करेगा लेकिन अनुशंसित नहीं है जब तक कि आप इसका उपयोग करने के बारे में बहुत अच्छी तरह से वाकिफ और सावधान न हों।

Comments

यह मत करो! बस एक इनलाइन फ़ंक्शन ( on:click={() => handleClick('parameter1')})

— रिच हैरिस

बस एहसास हुआ कि आप जिस प्रस्ताव का जवाब दे रहे थे। Currying दृष्टिकोण के खिलाफ कारण मैं सलाह दोहरा है - पहला, यह कम तुरंत स्पष्ट है (लोग ग्रहण करने के लिए है कि करते हैं क्या हो रहा है handleClick('parameter1')क्या होता है जब क्लिक होता है ।, गलत तरीके से दूसरे, यह मतलब है कि हैंडलर जरूरतों पलटाव होने के लिए जब भी मानकों परिवर्तन, जो करने से इनकी है वर्तमान में, एक बग है, कि करता है काम नहीं वैसे भी अर्थ। svelte.dev/repl/a6c78d8de3e2461c9a44cf15b37b4dda?version=3.12.1

— रिच हैरिस

सच है, मुझे इस बात की जानकारी नहीं थी कि बग ने कभी भी इसका सामना नहीं किया। फिर कोडबेस में मैं जिस पर काम कर रहा हूं, हम कभी भी इस तरह के पैरामीटर को पास नहीं करते हैं, वे लगभग हमेशा ऑब्जेक्ट होते हैं और जो काम करने लगते हैं: svelte.dev/repl/72dbe1ebd8874cf8acab86779455fa17?version=3.12.1

— Stephane Vanraes

मैंने कुछ घुमावदार नुकसान और अन्य प्रतिबिंबों के साथ अपना उत्तर अपडेट किया। इनपुट के लिए धन्यवाद

— Step31 Vanraes

आह हां, यह वस्तुओं के साथ काम करेगा, जब तक कि संदर्भ स्वयं नहीं बदलता (और अंतर्निहित बग को नियत समय में भी ठीक किया जाएगा)

— रिच हैरिस