Làm thế nào để truyền tham số vào: nhấp vào Svelte?

Liên kết một chức năng với một nút rất dễ dàng và đơn giản:

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

Nhưng tôi không thấy cách truyền tham số (đối số) cho hàm, khi tôi làm điều này:

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

Các chức năng được gọi là tải trang, và không bao giờ nữa.

Có thể hoàn toàn có thể truyền tham số cho hàm được gọi từ on:click{}?

Tôi chỉ tìm thấy một cách hacky để làm điều đó. Gọi hàm từ một trình xử lý nội tuyến hoạt động.

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

TL; DR

Chỉ cần bọc chức năng xử lý trong một chức năng khác, để sử dụng chức năng mũi tên sang trọng

Bạn phải sử dụng một khai báo hàm và sau đó gọi hàm xử lý với các đối số. Chức năng mũi tên là thanh lịch và tốt cho kịch bản này.

TẠI SAO tôi cần một hàm bọc khác?

Nếu bạn chỉ sử dụng trình xử lý và truyền các tham số, nó sẽ trông như thế nào?

Có lẽ là một cái gì đó như thế này:

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

Nhưng hãy nhớ rằng, handleClick("arg1")đây là cách bạn gọi hàm ngay lập tức và đó chính xác là những gì đang xảy ra khi bạn đặt nó theo cách này, nó sẽ được gọi khi thực thi đạt đến dòng này, và không như mong đợi, BẬT BẤM VÀO ...

Do đó, bạn cần một khai báo hàm, sẽ chỉ được gọi bằng sự kiện nhấp chuột và bên trong nó, bạn gọi trình xử lý của mình với nhiều đối số như bạn muốn.

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

Như @Rich Harris (tác giả của Svelte) đã chỉ ra trong các ý kiến ​​trên: Đây không phải là hack, nhưng đó là những gì tài liệu thể hiện trong hướng dẫn của họ: https://svelte.dev/tutorial/inline-handlers

Rich đã trả lời điều này trong một bình luận, vì vậy hãy ghi nhận anh ta, nhưng cách để ràng buộc các tham số trong trình xử lý nhấp chuột như sau:

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

function onDelete (id) {
  ...
}

Để cung cấp thêm một số chi tiết cho những người cũng đấu tranh với điều này và nó phải có trong tài liệu nếu không, bạn cũng có thể nhận sự kiện nhấp chuột trong một trình xử lý như vậy:

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

Tôi đã làm cho nó làm việc với điều này:

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

function onDelete(id) {
}

Đây là một phương thức gỡ lỗi và đối số sự kiện:

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


const onKeyDown = debounce(handleInput, 250);

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

Không có cách rõ ràng được đề cập trong tài liệu và giải pháp của bạn sẽ hoạt động nhưng thực sự không thanh lịch lắm. Giải pháp ưa thích của riêng tôi là sử dụng currying trong chính khối script .

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

Và trong HTML

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

Coi chừng cà ri

Như đã đề cập trong các ý kiến, cà ri có những cạm bẫy của nó. Cái phổ biến nhất trong ví dụ trên handleClick('parameter1')sẽ không được kích hoạt khi nhấp mà thay vào đó là kết xuất, trả về một chức năng lần lượt sẽ được kích hoạt. Điều này có nghĩa là hàm này sẽ luôn sử dụng 'tham số1' làm đối số.

Do đó, sử dụng phương pháp này sẽ chỉ an toàn nếu tham số được sử dụng là một hằng số và sẽ không thay đổi khi được hiển thị.

Điều này sẽ đưa tôi đến một điểm khác:

1) Nếu đó là hằng số được sử dụng một tham số, bạn cũng có thể sử dụng chức năng riêng biệt

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

2) Nếu giá trị là động nhưng có sẵn trong thành phần, điều này vẫn có thể được xử lý bằng chức năng độc lập:

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

3) Nếu giá trị là động nhưng không có sẵn từ thành phần vì điều này phụ thuộc vào một số loại phạm vi (ví dụ: danh sách các mục được hiển thị trong khối #each), 'hacky' phương pháp sẽ hoạt động tốt hơn. Tuy nhiên tôi nghĩ sẽ tốt hơn nếu trong trường hợp đó có các phần tử danh sách như là một thành phần và quay lại trường hợp # 2

Để kết luận: cà ri sẽ hoạt động trong một số trường hợp nhất định nhưng không được khuyến khích trừ khi bạn nhận thức rất rõ và cẩn thận về cách sử dụng nó.