66

関数をボタンにバインドするのは簡単で簡単です。

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

8 に答える 8

53

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

于 2020-04-04T08:02:15.667 に答える
1

ここでは、デバウンス メソッドとイベント引数を使用しています。

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


const onKeyDown = debounce(handleInput, 250);

async function handleInput(event){
    console.log(event);
}
于 2019-12-06T22:08:00.103 に答える