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")이것은 함수를 즉시 호출하는 방법이며,이 방법으로 넣을 때 발생하는 정확한 동작입니다. 실행은이 행에 도달하면 호출 되며 예상대로 ON BUTTON CLICK ...

따라서 click 이벤트에 의해서만 호출되는 함수 선언이 필요하며 함수 선언은 그 안에서 원하는만큼 많은 인수를 사용하여 핸들러를 호출합니다.

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

@Rich Harris (Svelte의 저자)가 위의 주석에서 지적한 것처럼 : 이것은 해킹은 아니지만 설명서가 자습서에서 보여주는 것입니다 : https://svelte.dev/tutorial/inline-handlers

리치 (Rich)는이 의견에 대한 답변으로 답변을했지만 클릭 핸들러에서 매개 변수를 바인딩하는 방법은 다음과 같습니다.

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

function onDelete (id) {
  ...
}

이 문제로 어려움을 겪고있는 사람들에게 추가 세부 정보를 제공하고 그렇지 않은 경우 문서에 있어야 합니다. 이러한 핸들러에서 click 이벤트를 얻을 수도 있습니다.

<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) {
}

여기에는 디 바운스 방법과 이벤트 인수가 있습니다.

<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')클릭 할 때 발생하지 않고 렌더링 할 때 발생하며 클릭시 발생하는 함수를 반환합니다. 즉,이 함수는 항상 'parameter1'을 인수로 사용합니다.

따라서이 메소드를 사용하면 사용 된 매개 변수가 일정한 상수 인 경우에만 안전하며 일단 렌더링 된 후에는 변경되지 않습니다.

이것은 또 다른 요점을 알려줍니다.

1) 상수가 매개 변수를 사용하는 경우 별도의 함수를 사용할 수도 있습니다

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

2) 값이 동적이지만 구성 요소 내에서 사용 가능한 경우 독립형 기능으로 처리 할 수 ​​있습니다.

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

3) 값이 동적이지만 구성 요소에서 사용할 수없는 경우 (예 : #each 블록에 렌더링 된 항목 목록) 'hacky' 접근 방식이 더 효과적입니다. 그러나이 경우 목록 요소를 구성 요소 자체로 사용하고 사례 # 2로 넘어가는 것이 좋습니다.

결론 : 카레는 특정 상황에서 작동하지만 사용법을 잘 알고 조심하지 않으면 권장하지 않습니다.