วิธีการส่งผ่านพารามิเตอร์ไปที่: คลิกใน Svelte?

การผูกฟังก์ชั่นเข้ากับปุ่มนั้นทำได้ง่ายและตรงไปตรงมา:

<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>

TL; DR

เพียงแค่ห่อฟังก์ชั่นการจัดการในฟังก์ชั่นอื่นเพื่อความหรูหราใช้ฟังก์ชั่นลูกศร

คุณต้องใช้การประกาศฟังก์ชั่นแล้วโทรจัดการกับข้อโต้แย้ง ฟังก์ชั่นลูกศรนั้นสวยงามและดีสำหรับสถานการณ์นี้

ทำไมฉันต้องใช้เครื่องห่อหุ้มฟังก์ชั่นอื่น?

หากคุณต้องการใช้ตัวจัดการและส่งผ่านพารามิเตอร์มันจะมีลักษณะอย่างไร

อาจเป็นเช่นนี้

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

แต่โปรดจำไว้ว่าhandleClick("arg1")นี่เป็นวิธีที่คุณเรียกใช้ฟังก์ชั่นได้ทันทีและนั่นคือสิ่งที่เกิดขึ้นเมื่อคุณใช้วิธีนี้มันจะถูกเรียกเมื่อการประมวลผลมาถึงบรรทัดนี้และไม่เป็นไปตามที่คาดไว้บนปุ่มคลิก ...

ดังนั้นคุณต้องมีการประกาศฟังก์ชั่นซึ่งจะถูกเรียกใช้โดยเหตุการณ์คลิกเท่านั้นและภายในนั้นคุณเรียกตัวจัดการของคุณด้วยอาร์กิวเมนต์มากเท่าที่คุณต้องการ

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

ในฐานะ @Rich Harris (ผู้เขียนของ Svelte) ชี้ให้เห็นในความคิดเห็นข้างต้น: นี่ไม่ใช่การแฮ็ก แต่เป็นเอกสารที่แสดงให้เห็นในบทเรียนของพวกเขา: https://svelte.dev/tutorial/inline-handlers

ที่อุดมไปด้วยได้ตอบในความคิดเห็นดังนั้นเครดิตกับเขา แต่วิธีการผูกพารามิเตอร์ในตัวจัดการการคลิกเป็นดังนี้:

<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
  ...
}

ฉันทำให้มันทำงานกับสิ่งนี้:

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

function onDelete(id) {
}

นี่คือวิธีการ debounce และอาร์กิวเมนต์ของเหตุการณ์:

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


const onKeyDown = debounce(handleInput, 250);

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

ไม่มีวิธีที่ชัดเจนที่กล่าวถึงในเอกสารประกอบและวิธีการแก้ปัญหาของคุณจะทำงานได้ แต่ไม่สวยมาก โซลูชันที่ฉันต้องการคือใช้การแช่งในบล็อกสคริปต์

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

และในรูปแบบ HTML

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

ระวังการแกง

ดังที่ได้กล่าวไว้ในความคิดเห็นแกงกะหรี่มีข้อผิดพลาด ตัวอย่างที่พบบ่อยที่สุดซึ่งในตัวอย่างด้านบนhandleClick('parameter1')จะไม่ถูกยิงเมื่อคลิก แต่เป็นการแสดงผล แต่จะส่งคืนฟังก์ชันที่จะถูกเปิดใช้งาน onclick ซึ่งหมายความว่าการทำงานนี้จะมักจะใช้ 'พารามิเตอร์ 1' ในขณะที่มันเป็นข้อโต้แย้ง

ดังนั้นการใช้วิธีนี้จะปลอดภัยหากพารามิเตอร์ที่ใช้เป็นค่าคงที่บางชนิดและจะไม่เปลี่ยนแปลงเมื่อมีการแสดงผล

สิ่งนี้จะพาฉันไปที่จุดอื่น:

1) หากเป็นค่าคงที่ที่ใช้พารามิเตอร์คุณสามารถใช้ฟังก์ชันแยกกันได้เช่นกัน

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

2) หากค่าเป็นแบบไดนามิก แต่พร้อมใช้งานภายในส่วนประกอบสิ่งนี้สามารถจัดการได้ด้วยฟังก์ชันสแตนด์อโลน:

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

3) หากค่าเป็นแบบไดนามิก แต่ไม่พร้อมใช้งานจากองค์ประกอบเนื่องจากสิ่งนี้ขึ้นอยู่กับขอบเขตบางประเภท (เช่น: รายการของรายการที่แสดงในบล็อก #each) วิธีการ'แฮ็ค'จะทำงานได้ดีขึ้น อย่างไรก็ตามฉันคิดว่ามันจะดีกว่าถ้าในกรณีนั้นมี list-elements เป็นส่วนประกอบเองและถอยกลับไปเป็น case # 2

ในการสรุป: การแกงจะทำงานได้ในบางกรณี แต่ไม่แนะนำเว้นแต่คุณจะทราบดีและระมัดระวังในการใช้งาน