এতে প্যারামিটারগুলি কীভাবে পাস করবেন: স্বেলেটে ক্লিক করুন?

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

এটি যা ডক্স এমনকি স্পষ্টভাবে উল্লেখ করেনি ts তবে হ্যাঁ এই মুহূর্তে আমার মনে হয় .. যতক্ষণ না তারা অন্যরকম সমাধান নিয়ে আসে ..

— মণীশ

এটি কোনও হ্যাক নয়, এটি কীভাবে কাজ করে । টিউটোরিয়ালটি এটি স্পষ্টভাবে উল্লেখ করা হয়েছে.দেব

— সমৃদ্ধ হ্যারিস

তোমার মন্তব্যের জন্য ধন্যবাদ! এটি করার এই "হ্যাকি উপায়" সর্বোপরি খারাপ নয়, তবে আমি বলতে সাহস করব যে ডক্স এবং টিউটোরিয়ালটি এ সম্পর্কে খুব স্পষ্ট নয় । যদিও এটি কেবল আমিই।

— ফেলডেভ

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

সমৃদ্ধ একটি মন্তব্যে এটির জবাব দিয়েছেন, তাই তাকে creditণ দিন, তবে একটি ক্লিক হ্যান্ডলারের মধ্যে প্যারামিটারগুলি আবদ্ধ করার উপায়টি নিম্নরূপ:

<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 নেই?

— মাইকম্যাকানা

কারণ আমি পিডব্লিউএগুলি তৈরি করি যাগুলির ফ্যালব্যাক হিসাবে লিঙ্ক রয়েছে তাই এটি অভ্যাসের আরও কারণ। এটি সহজেই একটি বোতাম হতে পারে।

— অ্যান্টনি জোন্স

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
} 

এবং এইচটিএমএল মধ্যে

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

তরকারি থেকে সাবধান থাকুন

মন্তব্যে উল্লিখিত হিসাবে, তরঙ্গকরণ এর অসুবিধা আছে। উপরের উদাহরণে সর্বাধিক সাধারণ যেটি handleClick('parameter1')ক্লিক করার সময় বরখাস্ত করা হবে না বরং রেন্ডারিংয়ের সময়, এমন কোনও ফাংশন ফিরে আসবে যা অনক্লিক হয়ে যাবে। এর অর্থ এই যে এই ফাংশনটি সর্বদা 'প্যারামিটার 1' এর যুক্তি হিসাবে ব্যবহার করবে ।

সুতরাং এই পদ্ধতিটি ব্যবহার করা কেবল তখনই নিরাপদ হবে যদি ব্যবহৃত প্যারামিটারটি কোনও ধরণের ধ্রুবক হয় এবং একবার রেন্ডার হওয়ার পরে এটি পরিবর্তন হয় না।

এটি আমাকে অন্য একটি বিষয়ে নিয়ে আসবে:

1) যদি এটি পরামিতিটি ধ্রুবক ব্যবহৃত হয় তবে আপনি পৃথক ফাংশনটিও ব্যবহার করতে পারেন

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

2) যদি মানটি গতিশীল তবে উপাদানটির মধ্যে পাওয়া যায় তবে এটি এখনও স্ট্যান্ডেলোন ফাংশন দিয়ে পরিচালনা করা যেতে পারে:

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

৩) মানটি যদি গতিশীল হয় তবে উপাদানটি থেকে পাওয়া যায় না কারণ এটি কোনও ধরণের স্কোপের উপর নির্ভরশীল (যেমন: একটি # ব্লকে আইটেমগুলির তালিকা দেওয়া হয়) 'হ্যাকি' পদ্ধতির আরও ভাল কাজ করবে। তবে আমি মনে করি সেই ক্ষেত্রে তালিকার উপাদানগুলির একটি উপাদান হিসাবে তাদের থাকা ভাল এবং কেস # 2 এ ফিরে আসাই ভাল

উপসংহারে: কার্য়িং নির্দিষ্ট পরিস্থিতিতে কাজ করবে তবে আপনি কীভাবে এটি ব্যবহার করবেন সে সম্পর্কে খুব সচেতন এবং যত্নবান না হলে আপনি সুপারিশ করবেন না।

Comments

এটা করবেন না! কেবল একটি ইনলাইন ফাংশন তৈরি করুন ( on:click={() => handleClick('parameter1')})

— সমৃদ্ধ হ্যারিস

আপনি যে প্রস্তাবটির প্রতি সাড়া দিচ্ছেন তা কেবল উপলব্ধি হয়ে গেছে। সংবাহন পদ্ধতির বিরুদ্ধে কারনেই আমি পরামর্শ দ্বিগুণ হয় - প্রথম, এটা কম অবিলম্বে পরিষ্কার (মানুষের অনুমান করা যে ঝোঁক কি ঘটছে handleClick('parameter1')যা হওয়ার তাই হল যখন ক্লিকের ঘটে ।, ভুল দ্বিতীয়ত, এটা মানে হল যে হ্যান্ডলার চাহিদা রিবাউন্ড হতে যখনই পরামিতি পরিবর্তন, যা সাবঅপটিমাল Currently

— রিচ হ্যারিস

সত্য, আমি যে বাগটি নিজেই এটির মুখোমুখি হয়েছি সে সম্পর্কে আমি সচেতন ছিলাম না। তারপর কোডবেস আমি আমরা কাজ করছি আবার ভালো প্যারামিটার পাস না, তারা প্রায় সবসময় বস্তু এবং যে কাজ বলে মনে হয়: svelte.dev/repl/72dbe1ebd8874cf8acab86779455fa17?version=3.12.1

— স্টিফেন Vanraes

আমি আমার উত্তরটি কিছু কারিগরি ক্ষতি এবং অন্যান্য প্রতিচ্ছবি দিয়ে আপডেট করেছি।

— ইনপুটটির

হ্যাঁ, এটি অবজেক্টগুলির সাথে কাজ করবে, যতক্ষণ না রেফারেন্সটি নিজেই পরিবর্তন হয় (এবং অন্তর্নিহিত বাগটি যথাযথ

— রিচ হ্যারিস